因为在大中城市POI点过于密集,导致POI产生重叠的现象,所以我们对POI点做了分级显示处理。
部分村庄因为优先级较低所以没有在地图上显示出来,或者在较小比例尺下才会显示,如您的车机版本为公众版,您可在高德地图官网车机模块,下载8.0.6手机版地图,用热点更新数据的方式,将手机高德地图全量数据同步到车机上。
方法/步骤分步阅读
1/7
1.首先我们在手机上找到高德地图点击打开。
2/7
2.然后点击打开左上角的头像。
3/7
3.然后点击右上角的设置按钮。
4/7
4.进入之后点开导航设置。
5/7
5.然后点击打开图片显示。
6/7
6.点击打开之后,就可以设置比例尺智能缩放开关,默认是关闭的。
7/7
7.可以手动将它打开即可。
地图上都有个比例尺的,画一小段,然后标个5公里或者10公里,那就表示这个地图上所有的距离都可参照这个比例。
另外有一些地图是标明1:500或1:5000或其它,那就是把你所量出来的乘以500或5000或其它,就是实际距离。 比如一个1:5000的地图,你在地图上量出来1CM,那就是实际的5000CM,即50米。
就是图上距离和实际距离的比值,
打开高德地图app应用之后,在主界面点击左上角的个人头像,进入到个人中心界面。然而个人中心界面的右上角,找到设置图标之后点击进入其中。高德地图app设置界面中,找到地图设置选项,点击进入到地图相关的设置界面之后,就可以看到地图设置界面就可当中有一个地图文字大小的选项,点击进入到其中,就能准备进行地图字体大小的设置了。
在设置界面通过点击滑块来调整自己想要的字体大小,达到符合自己心意即可,界面中有提示预览字体的变化效果。
高德地图1x1的含义就是一个比例的尺寸。
我们在手机上打开高德地图后点击左上角的“个人中心”按钮。
然后在打开的高德地图个人中心页面中点击右上角的“设置”按钮。
这时就会打开高德地图的设置页面,在页面中找到“通勤设置”的菜单项。
接着在打开的通勤设置页面中点击“图面显示”的菜单面。
在打开的图面显示页面找到“比例尺智能缩放”的设置项。
点击该设置项后面的开关,把其设置为打开的状态就可以了。这样我们就开启了比例尺智能缩放的功能了。
在“我的”选项中,选择我的车辆,点击添加车辆,选择车辆类型,之后就会出现车辆长度高度等可供填写。
缩小放大左下角都会显示比例尺的。
高德地图标尺也是高德地图比例尺,表示显示地图与实景的距离缩放比例!
准备页面
在正式开始开发地图应用之前,您需要做如下几步:
1 在高德地图官网注册一个账号
2 申请JSAPI的开发者Key
申请地址:
http://lbs.amap.com/dev/key
引入高德地图JavaScript API入口脚本:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
创建地图容器
在页面body里你想展示地图的地方创建一个div 容器,并指定id标识:
<div id="container"></div>
指定容器大小
使用CSS为地图容器设置合适的大小,比如:
#container {width:300px; height: 180px; }
创建地图
做完简单的准备工作之后,就可以开始创建地图了.
按照默认属性创建地图
生成一副简单地图只需要一句代码,将我们刚刚创建的div的id传给Map的构造函数即可,这个时候API将根据用户所在的城市自动进行地图中心点和级别的设定:
var map = new AMap.Map('container');
设定地图的中心点和级别
我们一般需要给地图按需设定中心点和坐标等属性,这里可以通过两种方式,第一种,直接在地图初始化的时候传入相关属性,center属性的值可以使经纬度的二元数组,也可以是AMap.LngLat对象,要求经度值在前,纬度值在后:
var map = new AMap.Map('container',{
zoom: 10,
center: [116.39,39.9]});
也可以在地图初始化过后,任何需要的地方通过方法来改变地图的中心点和级别
var map = new AMap.Map('container');
map.setZoom(10);
map.setCenter([116.39,39.9]);
添加点标记
创建好地图之后,我们就可以在地图上添加点标记了,用来标注任何用户感兴趣的位置和信息,这里使用到了AMap.Marker这个类。
点标记的创建与添加
同地图一样,点标记可以在创建的时候设定位置等属性,如果设定了map属性的话,marker点将被立即添加到地图上:
var marker = new AMap.Marker({
position: [116.480983, 39.989628],
map:map
});
也可以在创建之后按需更改这些属性:
var marker = new AMap.Marker();
marker.setMap(map);
点标记的移除
移除的话,同样使用setMap方法,不传参数或者传入空参数:
marker.setMap();
添加信息窗体
我们也可以用信息窗体InfoWindow类来向用户展示一些更详细的信息,比如点击一个点标记后,通过信息窗体来展示这个点标记在哪里
信息窗体的创建与设定
信息窗体一样可以在创建的时候设定内容、偏移量、大小等属性,offset是信息窗体的锚点以position为基准位置的像素偏移量,content除了使用字符串的形式外也可以直接设定为某个创建好的DOM节点:
var infowindow = new AMap.InfoWindow({
content: '<h3>高德地图</h3><div>高德是中国领先的数字地图内容、导航 和位置服务解决方案提供商。</div>',
offset: new AMap.Pixel(0, -30),
size:new AMap.Size(230,0)
})
也可以在创建之后按需更改这些属性:
infowindow.setSize(new AMap.Size(150,50));
var contentDiv = document.createElement('div');
contentDiv.innerText='我是信息窗体';
infowindow.setContent(contentDiv);
如何打开信息窗体
我们可以在信息窗体创建之后立即调用其open方法将它显示在需要的位置:
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
也可以通过事件监听,在需要的时候才将信息窗体显示出来,比如在marker被单击的时候显示
var clickHandle = AMap.event.addListener(marker, 'click', function() {
infowindow2.open(map, marker.getPosition())
})
当不再需要点击marker显示信息窗体这个功能的时候,可以通过如下方式移除事件绑定
AMap.event.removeListener(clickHandle);
使用高级信息窗体
除了普通的信息窗体,我们还提供了封装了周边搜索和路线规划功能在内的高级信息窗体,要使用高级信息窗体,首先需要通过plugin方法加载该插件,然后就可以和普通信息窗体一样进行创建和打开了。如果为高级信息窗体制定了panel属性,将在以panel的值为id的div上显示周边搜索或者路线规划的结果,如果需要对高级信息窗体和panel内容的样式进行修改,可以对相应classname的css进行重写:
AMap.plugin('AMap.AdvancedInfoWindow',function(){
var infowindow = new AMap.AdvancedInfoWindow({
content: '<h3 >高德地图</h3>'+
'<div >高德是中国领先的数字地图内容、'+
'导航和位置服务解决方案提供商。</div>',
offset: new AMap.Pixel(0, -30),
asOrigin:false
});
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
})
添加工具条和比例尺
高德地图JSAPI提供了大量丰富的功能控件和服务插件,下面我们来给上面做好的地图添加两个常用的控件,工具条和比例尺。
添加
添加控件的时候首先需要加载插件,同时需要多个插件的时候第一个参数可以设定为控件名称的数组
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){//TODO 创建控件并添加
})
在回调函数里我们来进行控件的生成和添加:
AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
var toolBar = new AMap.ToolBar();
var scale = new AMap.Scale();
map.addControl(toolBar);
map.addControl(scale);
})
移除
要移除控件的时候调用地图的removeControl方法即可