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地名'
    });
  • 相关阅读:
    H.264编码之DCT变换原理
    颜色空间转换
    jdbc 大数据存储 图片读取
    spring 事务配置
    Cglib代理
    jdk代理
    spring装配bean
    map 常用方法
    list map set常用方法之list
    calendar 类 用法
  • 原文地址:https://www.cnblogs.com/peter-web/p/9204460.html
Copyright © 2011-2022 走看看