关于高德地图嵌入H5页面

场景

在H5页面中嵌入高德地图，并可以通过点击地图来获取对应位置的经纬度。
PS：结尾处有我上传的资源，如果没有积分的，也可以直接联系我。

所需技能

会写前端代码即可。最好会用jquery。

具体步骤。

高德地图注册为开发者

收缩高德开放平台，点击注册，根据需求选择对应的开发者。
注：不同类型的开发者，每日调用高德地图API的次数不同。一般个人使用和学习，个人开发者即可

建立自己对应的应用。

1. 登录后点击控制台。
2. 点击我的应用，创建新的应用。应用类型随便填写即可
3. 选择新建的应用，点击添加key。服务平台勾选Web端、提交即可
4. 之后会在对应应用下出现一个key字段。之后会用。

编写代写

1. 引入对应的js文件。

2. 搭地图的容器。

3. 生成地图
   这里new AMap.Map的第一个参数，就是你的地图容器的id值

	var map = new AMap.Map("container", {
        resizeEnable: true,//地图是否监听容易的尺寸大小
		zoom:15,//初始缩放大小。
       		//center: [112.508049,37.753719] //初始坐标
	});

4. 为地图增加点标记

var marker = new AMap.Marker({
        	position: map.getCenter(),//
	        cursor: 'move',
        	raiseOnDrag: true
	});
	//将点标记放入地图map中
	marker.setMap(map);

5. 为地图注册点击事件
   这里修改input的值我用的是jquery，不太懂但是会写js的可以用document.getElementById(‘id’).value = e.Inglat.getLng()；来替代。

var clickEventListener = map.on('click', function(e) {
		//修改上面文本框的值
		$("#subA").val(e.lnglat.getLng());
		$("#subB").val(e.lnglat.getLat());
	
		//将点标记的定位点修改。
        	marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]); 
    	});

6. 引入bootstrap的css文件，增加兼容IE和响应式布局。(非必须的，不如说我这一块知道的不多，不足之处请及时联系我。)

在head标签里面(个人习惯，css文件和meta标签喜欢写在这里)

结尾

由于本人是一名菜鸟，在代码的编写方面也有很多不足。欢迎各位大佬的意见、批评和建议，也欢迎各位的讨论。
资源链接