高德地图Web初级

概述

    当我们在开发项目过程中,某些业务场景需要使用到定位,故我们需要引用第三方地图,如高德地图.下面便是在使用过程中的心得.

引入

    当我们接高德地图的时候,需要引入以下script, 我们需要注意的是,把当前script引入到根index.html页面中,只有这样才会正确加载高德地图.

<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

创建地图实例

    AMap.Map(arg1,arg2), 其中arg1为地图容器的ID,arg2为地图的配置项. 实例传送门

let mAmapInstance = new AMap.Map('element_container_id', {
                    resizeEnable: true,
                    zoom: 10,
                    lang: 'ch",
                });

创建覆盖物

    在高德地图的使用中,覆盖物是必不可少的覆盖物传送门

//create
let mMarker = new AMap.Marker({
                                content: "<div>this is market content</div>",
                                position: new AMap.LngLat("lng", "lat"),
                            });
// add map
mAmapInstance.add(mMarker);
//show 
mAmapInstance.setFitView();

更新覆盖物

    当我们做一些执行某些操作之后需要更新覆盖物的内容或者位置或者层级

    mMarker.setContent("<div>this is update content</div>");
    mMarker.setPosition(["lng", "lat"]);
    mMarker.setzIndex(101)//层级默认100

覆盖物处于中心

    当我们想要让某个覆盖物处于中心点.当前lng、lat为
覆盖物的经纬度

mAmapInstance.setCenter(["lng", "lat"]);
mAmapInstance.setZoom(13)

覆盖物内容点击事件

    当我们处理复杂的业务的时,覆盖物的内容会有许多,避免不了去操作内容的点击事件,但是在高德地图的API中只具有对整个标记的事件处理.如何处理内容的局部点击,便是我们所要关心的内容.

 mMarker.setContent("<div class="item-click" data-item-data="itemData">click me</div>");

当我们要点击覆盖物的内容,并且输入点击覆盖的数据时,我们便要采取其他形式来处理点击时间.

document.getElementById("element_container_id").addEventListener("click", function (e) {
     let contentClassName="item-click";//内容点击的class(唯一性)
     let className = e.target.className;//当前点击目标的className
     let data = e.target.getAttribute("data-item-data");//当前点击目标的data-item-data的内容
     
     if(className===contentClassName){
         //当前item-click的点击事件处理块
     }
})

结束语

以上便是对于高德地图中所使用到的实例创建、覆盖物创建、覆盖物相关的内容.