zoukankan      html  css  js  c++  java
  • web集成高德地图

    1、使用高德地图API需到官网添加一个Key,http://lbs.amap.com/dev/key/app 

    2、页面头引入 

    
    
    <div id="addressMap"></div>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.6&key=申请的key值"></script>

    3、js里面代码如下:

    // 新建高德地图对象
        var map = new AMap.Map("addressMap", {               // 填写ID
            center: [114.1827800000, 22.3060300000],         // 经纬度
            zoom: 17         // 放大系数
        });
    
        // 增加高德地图插件
        AMap.plugin(
            ["AMap.ToolBar", "AMap.Geolocation"],
            function () {
                //异步加载插件
                var toolbar = new AMap.ToolBar();
                map.addControl(toolbar);
                var geolocation = new AMap.Geolocation();
                map.addControl(geolocation);
                var marker = new AMap.Marker({
                    position: [114.1827800000, 22.3060300000],
                    title: '某地方',
                    topWhenClick: true,
                    visible: true,
                    animation: 'AMAP_ANIMATION_BOUNCE',
                    clickable: true,
                    label: {content: '<span style="color:rgb(0,0,0);">某地方</span>'}
                });
                map.add(marker);
            }
        );

    具体API请到官网查看: http://lbs.amap.com/api/javascript-api/summary

    还可以唤起高德地图客户端:

    var gaodeLoc = [114.18217800000, 22.2720300000];
    var marker = new AMap.Marker({
        position: gaodeLoc
    });
    marker.markOnAMAP({
        position: marker.getPosition(),
        name: 'XXXXX地名'
    });
  • 相关阅读:
    Redis常见数据类型
    MYSQL常见可优化场景
    算术切片
    找数组里没出现的数
    不同路径和(II)
    不同路径和
    最小路径和
    强盗抢房子
    丑数(2)
    判断子序列
  • 原文地址:https://www.cnblogs.com/peter-web/p/9204460.html
Copyright © 2011-2022 走看看