高德地图的web开发必须先到开发者专区注册开发者,申请到一个key值,才可以引入。
下面贴出本人自己写的demo:
HTML页面:
<div id="container" style="width:100%;height:100%"></div>
script代码:
var map = new AMap.Map('container', {
});
map.plugin(["AMap.ToolBar"], function() {
map.addControl(new AMap.ToolBar());
});
var infoWindow = new AMap.InfoWindow({
}); //创建信息窗口对象 ps.高德目前不支持多信息窗口,即使创建多个窗口对象,也只会显示一个 10/26/2016
var lnglats= [["116.4123","39.906422"],["116.4352","39.906933"],["116.445435","39.9054345"]];
var data = [{"id":1,"name":"我是第1个点","type":1},{"id":2,"name":"我是第2个点","type":3},{"id":3,"name":"我是第3个点","type":7}];
var main_id = 0;
for(var i= 0,marker;i<lnglats.length;i++){
switch(data[i].type){
case 1: marker=new AMap.Marker({
position:lnglats[i],
map:map,
icon: new AMap.Icon({
size: new AMap.Size(40, 50),
cour:1,
image: "icon/map_green.png" //自定义的标记图片样式(图片需自己准备)
})
}); break;
case 3: marker=new AMap.Marker({
position:lnglats[i], //采用默认样式,无需自定义
map:map
}); break;
default: marker=new AMap.Marker({
position:lnglats[i],
map:map,
icon: new AMap.Icon({
size: new AMap.Size(40, 50),
image: "icon/map_red.png",
cour:7,
})
}); break;
}
content = [];
content.push('ID:'+data[i].id);
content.push('名称:'+data[i].name);
marker.content = content;
marker.title = data[i].id+"."+data[i].name; //标记点的title
if(data[i].id==2){ //默认打开第二个点的信息窗口
infoWindow.setContent(content.join("<br/>"));
infoWindow.open(map,lnglats[i]);
}
marker.on('dblclick',openAmap); //这里采用调到新页面方式导航,也可直接定义带导航功能的信息窗体,请参考http://lbs.amap.com/api/javascript-api/example/infowindow/infowindow-has-search-function/
//给Marker绑定单击事件
marker.on('click', markerClick);
}
map.setFitView();
//跳至地图当中导航
function openAmap(e){
e.target.markOnAMAP({
name:e.target.title,
position:e.target.getPosition()
})
}
//信息窗口
function markerClick(e){
infoWindow.setContent(e.target.content.join('<br/>'));
infoWindow.open(map, e.target.getPosition());
}
关于高德web开发:
1.信息窗口不支持多个,如有类似需求,可以使用自定义marker或label。
2.定位API缺少官方地图的处理,致使浏览器定位效果有所偏差。因此,本例并未在地图中直接加入导航功能,而是跳入新页面。