高德地图 JavaScript API v1.3 开发（多点标记、自定义坐标点、信息窗口、导航）（demo）

高德地图的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缺少官方地图的处理，致使浏览器定位效果有所偏差。因此，本例并未在地图中直接加入导航功能，而是跳入新页面。