关于高德地图嵌入H5页面
场景
在H5页面中嵌入高德地图，并可以通过点击地图来获取对应位置的经纬度。
PS：结尾处有我上传的资源，如果没有积分的，也可以直接联系我。
所需技能
会写前端代码即可。最好会用jquery。
具体步骤。
高德地图注册为开发者
收缩高德开放平台，点击注册，根据需求选择对应的开发者。
注：不同类型的开发者，每日调用高德地图API的次数不同。一般个人使用和学习，个人开发者即可
建立自己对应的应用。
- 登录后点击控制台。
- 点击我的应用，创建新的应用。应用类型随便填写即可
- 选择新建的应用，点击添加key。服务平台勾选Web端、提交即可
- 之后会在对应应用下出现一个key字段。之后会用。
编写代写
- 引入对应的js文件。
- 搭地图的容器。
- 生成地图
这里new AMap.Map的第一个参数，就是你的地图容器的id值
var map = new AMap.Map("container", {resizeEnable: true,//地图是否监听容易的尺寸大小zoom:15,//初始缩放大小。//center: [112.508049,37.753719] //初始坐标});
- 为地图增加点标记
var marker = new AMap.Marker({position: map.getCenter(),//cursor: 'move',raiseOnDrag: true});//将点标记放入地图map中marker.setMap(map);
- 为地图注册点击事件
这里修改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()]); });
- 引入bootstrap的css文件，增加兼容IE和响应式布局。(非必须的，不如说我这一块知道的不多，不足之处请及时联系我。)
在head标签里面(个人习惯，css文件和meta标签喜欢写在这里)
结尾
由于本人是一名菜鸟，在代码的编写方面也有很多不足。欢迎各位大佬的意见、批评和建议，也欢迎各位的讨论。
资源链接
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！