高德地图开发-常用api踩坑使用

一、高德地图的加载初始化

在这就踩过很多坑，新建项目正常显示没问题，放到我们的项目就是不显示，加载不出来，
这个时候不要慌，只要确保下面三部完成就莫问题了

1.引入高德地图开发者api

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=4611f58483d79aa58bf6d2b508078f9c&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>

生成key的方式自行百度，一大堆，下面是我的

我开发的时候在这就踩坑了，因为新接触的项目，不是很了解，系统前端是页面套页面的方式，所以我应该在公共页面main_null.html中引入api，而不是当前html
2.页面上给一个放地图的容器

<!--高德地图容器-->
            <div style="width: 500px; height: 400px;" id="dituContent"></div>

3.js里创建地图、初始化，放到页面地图容器中

map = new AMap.Map('dituContent',{
                resizeEnabel: false,//是否监控地图容器尺寸变化
                zoom: 10,//初始化地图层级
                center: [116.397428, 39.90923]//设置地图中心点
            });

创建地图语句固定，第一个参数为地图容器的id,第二个参数是初始化地图的属性，
这样地图就可以加载出来啦：

二、给地图添加标注

地图上的这个小蓝点是怎么来的呢，

//1.定义标注的图标
var markerContentBlue = '' +
        '<div>' +
        '   <img  style ="width:25px;height:34px;" src="/common/main/images/mapblue.png">' +
        '</div>';
  //2.创建标注
marker1[0] = new AMap.Marker({
         position:new AMap.LngLat(116.39, 39.9),//标注显示的位置
         content: markerContentBlue,//上面定义的图标
         offset: new AMap.Pixel(-13, -14)//移动距离：绝对坐标、相对坐标
     });
     //3.将标注添加到地图上
     map.add(marker1[0]);

三、地图点击事件

我们开发当然是要实现点击地图，获取点击位置的经纬度，详细地址信息进行保存、业务处理
注释已经写很清楚啦

map.on('click', function (e) {
            //1.清楚地图标注
            map.remove(marker1[0]);