// 首先需要去高德开放平台注册成为开发者,创建一个项目,获取相应的key后,才可以调用高德的开放api能力。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>mapDemo</title>
</head>
<style type="text/css">
#container{
    width:100%;
    height:720px;

}
</style>
<body>
    <div id="container">map</div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=59be48369a0f46ab2eaa44a77b0e5f4e"></script>
    <script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: [116.397428, 39.90923] //初始化地图中心点
    });
    AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//异步同时加载多个插件
    var toolbar = new AMap.ToolBar();
        map.addControl(toolbar);
    var driving = new AMap.Driving();//驾车路线规划
        driving.search(/*参数*/)
     });
    // var geolocation = new AMap.Geolocation()
    // geolocation.get

    map.on('complete', function(){
    // 地图图块加载完成后触发
    });

    var marker1 = new AMap.Marker({
    position: new AMap.LngLat(120.21201,30.2084),   // 经纬度对象,如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '杭州',
    icon: "./pic/loc.png"
    });
    var marker2 = new AMap.Marker({
    position: new AMap.LngLat(113.88308,22.55329),   // 经纬度对象,如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
    title: '深圳'
    });
    map.add(marker1);
    map.add(marker2);
    map.setFitView();

    function showCity(){
        alert('hello');
        console.log(marker1.title);
    }

    marker1.on('click',showCity);


    // map.on('click', function(ev) {
    //     // 触发事件的对象
    //     var target = ev.target;
    //     // 触发事件的地理坐标,AMap.LngLat 类型
    //     var lnglat = ev.lnglat;
    //     // 触发事件的像素坐标,AMap.Pixel 类型
    //     var pixel = ev.pixel;
    //     // 触发事件类型
    //     var type = ev.type;
    // });

    // marker1.addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  
    // function showMsg() {
 //    alert("杭州");
    // }

    </script>
</body>
</html>
最后修改:2021 年 06 月 09 日 04 : 18 PM
如果觉得我的文章对你有用,请随意赞赏