本文出自汗血宝马，转载时请注明出处及相应链接。
本文永久链接: http://www.caotama.com/25888.html
Ɣ回顶部如何用angularjs做高德地图区域指定_百度知道
如何用angularjs做高德地图区域指定
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自知道合伙人认证行家
互联网类行家
采纳数：5836
获赞数：6565
从事互联网运营推广，3年以上互联网运营推广经验，丰富的实战经验。现负责运营推广工作。
　　在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目，并实现地图上的多点标注，今天在这篇文章中，我们将在上一个项目的基础上，实现特定点的定位以及附加信息的展示。这样我们的项目就更加完善了，从宏观上看到每个点，从微观上分析每个点的不同。这种方法往往在大数据可视化方面很有效果。　　Angularjs+node+Mysql实现地图上的多点标注原文地址：（注：本文是在这篇博文的基础上进行增加功能的，还请各位能仔细搭建自己的环境，搭建环境与运行，这里将不再赘述。）　　项目源码地址：
（项目中的源码已经更新）　　一、项目演示　　我们经常在自己的业务中，需要搜索某一点，然后让其在地图中进行显示，显示时也必须带上自己的附加信息。项目运行结果图如下：　　当点击搜索按钮之后，结果如图　　定位到了特定的点，并且还打印出了该点所携带的附加信息。　　二、项目搭建　　首先来说一下我们的数据集，在数据集中我们有两张表，一张表为new_3,另一张表为sample表，其中所带的字段如下：　　new_3中的字段为前三个，sample表中的字段为后面几个。接下来我们将要实现的功能就是通过前台输入Order_id,后台进行接收，执行查询，并把返回的数据显示到前台。　　position.js文件代码：　　View Code　　其中需要说明的一点：order_id需要前台进行接收，所以需要这样书写：var order_id = req.body.order_　　start.js,由于在上一篇中我们已经将项目构建完成，现在我们只需要在start.js文件中增加这样一句代码即可：　　1 app.post('/getAllMarker4',position.getAllMarker4);　　controller.js　　View Code　　service.js　　1
var getAllMarker4 = function (query,success) {　　2
$http.post(CONFIG.host + '/getAllMarker4',query)　　3
.success(function(data){　　4
success(data);　　5
};　　html　　View Code　　在上述代码中使用了ng-model双向绑定，然后点击button进行触发，但凡前台后台数据传输，亦或者是获取数据，用这种方法都是简单易于实现的。还有不要忘记在自己的页面中加入从高德地图上获取到的开发者key值。这样一个搜索的功能就实现了。通过对于本文的学习，希望你能实现node架构前后台的交互传值，快去动手试试吧。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。百度地图/高德地图开发，如何实现地图上某些标注的显示与隐藏？
[问题点数：40分，结帖人u]
本版专家分：0
结帖率 88.89%
CSDN今日推荐
本版专家分：28
本版专家分：4413
2018年1月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|
其他相关推荐
1. 隐藏Marker
function hiddenMarker(eventtype){
var allOverlay = map.getOverlays();
for (var i = 0; i
if(allOverlay[i][&layerType&]==eventtype){
map.removeOverlay(allOverlay[i]);
移动端地图技术分享
字数4797 阅读8121 评论7 喜欢16
http://www.jianshu.com/p/4a
该文章属于原创，转载请注明：
http://www.jianshu.com/p/4a
本人现就职于国内某地图导航公司，这篇文章是我前段时间在公司组织技术分享的一个PPT，文章内容也主要由这个PPT的内容为主
先扔一些高德原有UI的更改占坑.
//更改系统原有定位图标
MyLocationStyle myLocationStyle = new MyLocationStyle();
myLocationStyle.myLocationIcon(BitmapDescriptorFactory
.fromResource(R.drawable.gps_point));// 设置小蓝点...
在引入地图的页面加入下列样式即可隐藏百度地图左下角的LOGO
.anchorBL{display:}
百度地图：https://lbsyun.baidu.com/高德地图 ：http://lbs.amap.com/由于本人专业方向是Java web。所以这里我这是结束web端的，也就是JS api 的使用。注册登录后，进入控制台。其实两个平台的控制台差不多。创建key（这里的key 很重要，类似一个人的身份证号码，可以标识你的应用）高德地图：创建一个应用可以创建多个key1. 点击创建新应用——2...
介绍最近着手做一个新的项目，其中涉及到地图定位，以及从服务器获取附近的特定商家并在地图上面标注出来。于是就研究了一下百度地图标注覆盖物功能，然后进行一点个人总结，以便学习交流使用。一、定位百度地图SDK从2.0.0版本起，将定位功能进行了分离，开发者在使用过程中，下载开发包的时候注意下载带有定位功能的SDK。
定位功能的具体实现这里不过多赘述请参看官方文档；
核心代码如下：
本篇主要讲述的是利用arcgis api加载互联网在线地图服务资源，简单封装一个底图切换控件js，在线地图包括：天地图、高德地图以及百度地图，效果图如下：
实现思路：
1.简单的底图切换控件map.LayerSwitcherToolbar.js文件，里面自定义加载天地图、高德地图以及百度地图类，其实都是继承TiledMapServiceLayer类：
（1）高德地图：
//高德地...
工作中可能会碰到这样的问题，开始已经确定了用百度地图，但是可能因为某一功能的实现需要改用高德地图。但我们没法确定后期会不会再改用百度，这就需要我们再时集成百度地图和高德地图，如果需要改动大量的代码，那就得不偿失了。工厂模式就能很好的解决这个问题。
既然是工厂模式，我们会根据传入的参数来实例化不同的对象：
public class LocationFactory implements Obser
使用计算两地之间的实际路程Demo
百度地图开发Marker|Polyline隐藏或显示不知道那位大神有高德地图和node.js配合使用的项目代码可以借我学习一下？？ - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
通过node.js从数据库中读取多个地址，然后将地址展示到高德地图上。
理解步骤是这样的（来自网上），如果有代码可以可以参看就好了。
1）初始化地图
2）获取当前位置坐标
3）根据坐标从服务器获取要显示的坐标数据
4）吧坐标数据显示在地图上
5）地图绑定移动事件
6）将地图的移动事件中获取的坐标 从服务器获取关联的 坐标数据
7）在地图上显示 6 获取的坐标
谢谢大家。
来自酷炫的
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的我所写的都是经的起考验的-----为发烧而生
如何去掉高德地图定位产生的淡蓝圆形区域
必备条件：
一、浏览器支持定位
浏览器定位插件，封装了标准HTML5定位，并且包含纠偏模块。
由于核心是HTML5定位，所以浏览器定位插件仅适用于支持HTML5的浏览器上，比如，Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 等。同时，需要浏览器允许该服务进行定位。如下图：
另外，浏览器定位插件也是混合定位，获取了wifi、基站信息用以定位，对于拥有 GPS 的设备，比如 iPhone，由于获得GPS信息，使得地理定位更加精确。
浏览器定位，最好使用在手机浏览器上，因为手机上植入了GPS模块，定位会更加准确，也更加符合使用场景。PC浏览器上，建议使用IP定位。
定位代码：（此代码已经将定位产生的背景为淡蓝色的的圆形区域去掉）
&!doctype html&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"&
&title&浏览器定位&/title&
&link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/&
&script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"&&/script&
&script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"&&/script&
&div id='container'&&/div&
&div id="tip"&&/div&
&script type="text/javascript"&
//加载地图，调用浏览器定位服务
map = new AMap.Map('container', {
resizeEnable: true
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000,
//超过10秒后停止定位，默认：无穷大
maximumAge: 0,
//定位结果缓存0毫秒，默认：0
convert: true,
//自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true,
//显示定位按钮，默认：true
buttonPosition: 'LB',
//定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true,
//定位成功后在定位到的位置显示点标记，默认：true
showCircle: false,
//定位成功后用圆圈表示定位精度范围，默认：true
（去掉圆形区域）
panToLocation: true,
//定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true
//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError);
//返回定位出错信息
//解析定位结果
function onComplete(data) {
var str=['定位成功'];
str.push('经度：' + data.position.getLng());
str.push('纬度：' + data.position.getLat());
str.push('精度：' + data.accuracy + ' 米');
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('tip').innerHTML = str.join('&br&');
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
二、应用浏览器定位，以当前定位点为中心点自动画一个半径1000米的圆形区域
&!doctype html&
&meta charset="utf-8"&
&meta http-equiv="X-UA-Compatible" content="IE=edge"&
&meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"&
&title&以浏览器定位点为圆心画圆&/title&
&link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/&
&script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"&&/script&
&script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"&&/script&
&div id='container'&&/div&
&div id="tip"&&/div&
&script type="text/javascript"&
var editor={};
//加载地图，调用浏览器定位服务
map = new AMap.Map('rightBox', {
resizeEnable: true
map.plugin('AMap.Geolocation', function() {
geolocation = new AMap.Geolocation({
enableHighAccuracy: true,//是否使用高精度定位，默认:true
timeout: 10000,
//超过10秒后停止定位，默认：无穷大
maximumAge: 0,
//定位结果缓存0毫秒，默认：0
convert: true,
//自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true,
//显示定位按钮，默认：true
buttonPosition: 'LB',
//定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true,
//定位成功后在定位到的位置显示点标记，默认：true
showCircle: false,
//定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true,
//定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy:true
//定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError);
//返回定位出错信息
//解析定位结果
function onComplete(data) {
var str=['定位成功'];
str.push('经度：' + data.position.getLng());
str.push('纬度：' + data.position.getLat());
str.push('精度：' + data.accuracy + ' 米');
str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));
document.getElementById('tip').innerHTML = str.join('&br&');
//定位圆心位置
editor._circle=(function(){
var circle = new AMap.Circle({
center: [data.position.getLng(), data.position.getLat()],// 圆心位置
radius: 1000, //半径
strokeColor: "#F33", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 3, //线粗细度
fillColor: "#ee2200", //填充颜色
fillOpacity: 0.35//填充透明度
circle.setMap(map);
map.setFitView();
//解析定位错误信息
function onError(data) {
document.getElementById('tip').innerHTML = '定位失败';
&/body&&/html&
最核心的参数是：
showCircle: false,
//定位成功后用圆圈表示定位精度范围，默认：true；将默认值改为：false即可。。。很简单了。。望采纳！。。。
可参考链接：http://lbs.amap.com/api/javascript-api/reference/plugin/#m_AMap.Geolocation
以下是效果图：
(转)android高德地图定位怎么让它不显示范围圆圈
高德地图之地图篇-----&定位的蓝点、添加Marker
iOS高德地图集成
iOS - 高德地图（原生）
android studio实现高德地图api定位
IOS去除百度地图定位后的蓝色圆圈和定位蓝点(精度圈)
iOS高德地图使用笔记
iOS开发 - 高德地图使用-搜索，路径规划
没有更多推荐了，