高德地图JSapi

简介: 1.js显示地图    /* 选择容器;设置地图的中心点,并标记 */ var marker, map = new AMap.

1.js显示地图 

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><!-- 引入高德地图的样式 -->

 

 <script src="http://webapi.amap.com/maps?v=1.3&key=aafdf4a9edda043681ff641e6d9b9ee8"></script><!-- 传入key -->
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script><!-- 引入高德地图js文件 -->
<div id="container" style="width:49%;height: 80%;"></div><!--放置地图的div  -->
<div id="container2" style="width:49%;height: 80%;"></div> 
/* 选择容器;设置地图的中心点,并标记 */
        var marker, map = new AMap.Map("container", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13
        }); 
        /* 设置地图的中心点,并标记 */
        var marker2, map2 = new AMap.Map("container2", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13
        }); 

2.点击获取地图经纬度坐标;创建marker点

    /* 点击获取地图坐标 */
        var clickEventListener = map.on('click', function(e) {
           document.getElementById("xy").value = e.lnglat.getLng() + ',' + e.lnglat.getLat(); 
          /* 点击一次新增一个标记点 */
             var marker= new AMap.Marker({
                map:map,
                position:[e.lnglat.getLng(),e.lnglat.getLat()]
                 });                
        });

3.在地图上绘制多边形折线

  //在地图上绘制折线
        var editor={};
        editor._polygon=(function(){
            return new AMap.Polygon({
                map: map,
                path: lineArr,/* 这里是一个数组; */
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: "#CD2626",
                fillOpacity: 0.35
            });
        })();
        map.setFitView();        
        editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);

第二种绘制图形

// 绘制轨迹
                             var polyline = new AMap.Polyline({
                                map: map,
                                path: lineArr,/* 这里是坐标数组 */
                                strokeColor: "red",  //线颜色
                                strokeOpacity: 1,     //线透明度
                                strokeWeight: 1,      //线宽
                                strokeStyle: "solid"  //线样式
                            });                             
                            map.setFitView();    
                            /*  将画线的区域渲染颜色*/
                            var polygon = new AMap.Polygon({
                                map: map,
                                fillOpacity:0.4,
                                path: lineArr
                            });    

4.开始编辑多边形;结束编辑多边形

    /* 开始编辑 */
        editor.startEditPolygon=function(){
            editor._polygonEditor.open();
        }
        /*结束编辑 */
        editor.closeEditPolygon=function(){
            /* 结束编辑时会自动将坐标全部存在数组内
                ;将数组转为字符串,以#号分隔 */
          var  arg = lineArr.join("#");
          document.getElementById("arg").value=arg+"#"; /* 这里是将数组转成的字符串存起来 */
          editor._polygonEditor.close();
        }

5.清除标记的方法

map.clearMap();

6,当时为了去除地图上的样式,起到刷新地图的效果;没有找到更好的方法,选择的重新加载一遍地图。覆盖之前的;也就是在div里重新加载一次;

7,自定义图标以及样式

    marker= new AMap.Marker({
                            title:name,/* 鼠标放上去显示的标题 */
                            map: map,
                            position: arr,/*  坐标数组*/
                            icon: new AMap.Icon({            
                                size: new AMap.Size(50,50),  //图标大小
                                image: "static/img/1.png",/*图片路径  */
                                imageOffset: new AMap.Pixel(0,0)/* 偏移量 */
                                        })        
                                });
            
                        marker.setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label;可以在css样式里调整
                            offset: new AMap.Pixel(-20,20),//修改label相对于maker的位置
                            content:"<span style='color: red'>"+name+"</span>"/* 这里写的是html代码 */
                        })

 

目录
相关文章
|
6月前
|
小程序 定位技术
uniapp微信小程序地图全屏显示配送范围
uniapp微信小程序地图全屏显示配送范围
120 1
|
6月前
|
PHP 移动开发 安全
PHP应用如何对接微信公众号JSAPI支付
本文介绍了微信支付的多种方式,包括JSAPI支付、APP支付、Native支付、付款码支付和H5支付。
81 8
|
5月前
|
定位技术 开发者
高德地图开发 —— 获取高德地图开发的 key
高德地图开发 —— 获取高德地图开发的 key
390 0
|
5月前
|
小程序 开发者
uniapp 获取微信的 openid(借助 uniCloud)
uniapp 获取微信的 openid(借助 uniCloud)
552 0
|
7月前
|
小程序 安全 定位技术
高德地图实现-微信小程序地图导航
高德地图实现-微信小程序地图导航
328 0
|
7月前
|
小程序 IDE 物联网
社区每周丨小程序商品及JSAPI支付全面开放(7.10-7.14)
社区每周丨小程序商品及JSAPI支付全面开放(7.10-7.14)
70 11
|
7月前
|
小程序 定位技术 API
微信小程序实现地图功能(腾讯地图)
微信小程序实现地图功能(腾讯地图)
|
7月前
|
定位技术 API 容器
vue3使用高德地图实现3d地图
vue3使用高德地图实现3d地图
|
定位技术 开发者
百度地图简单对接
百度地图简单对接
103 0
|
存储 API 对象存储
【 uniapp - 黑马优购 | 登录与支付(2)】如何实现三秒后跳转和微信支付
【 uniapp - 黑马优购 | 登录与支付(2)】如何实现三秒后跳转和微信支付
103 0