H5嵌入高德地图

 时间:2024-11-10 22:19:14

H5项目需要嵌入地图,显示客户地址。考虑到高德开放平台API还是蛮全的,所以选择它了。

方法/步骤

1、要想使用高德地图,首先要申请”Web服务API”密钥(key),这个要先认证身份。我们先找到“高德地图开放平台”官网,右上角点击“注册”,按提示一步步操作,注册成为开发者。

H5嵌入高德地图

H5嵌入高德地图

H5嵌入高德地图

H5嵌入高德地图

2、注册完成之后,右上角“控制台”进入,创建一个新应用。点击左边“我的应用“,点击右边内容区右上角“创建新应用”,弹出编辑界面。填入新的应用名称。

H5嵌入高德地图

H5嵌入高德地图

3、在新建的应用上,点击“添加”,在弹出的对话框中,输入key名称,选择绑定的服务为“嘛术铹砾web服务”,然后提交。成功之后就可以看到申请的key。有了这个key我们就可以在项目中调用高德API。

H5嵌入高德地图

H5嵌入高德地图

H5嵌入高德地图

H5嵌入高德地图

4、现在我们开始编写页面代码。首选引入对于的js和css文件。里面key就是上面申请的key。再创建一个地图的容器。

H5嵌入高德地图

H5嵌入高德地图

5、接下来生成地图。zoom:17,//初始缩放士候眨塄大小。center:['${lon}','${lat}']//初始坐番舸榆毛标,这里lon和lat是经度和纬度,是后台代码传过的。很多参数设置可以参考官方文档。接着为地图增加点标记,默认是一个蓝色的小气球标记。还可以为标记创建提示框,“content”可以定义自己的提示信息。

H5嵌入高德地图

H5嵌入高德地图

H5嵌入高德地图

6、其他的设置可以按自己的需求添加对于的api。现在启动项目,进入页面查看。效果如图。

H5嵌入高德地图

7、最后总结下,高德地图简单上手还是很容易,官方的api资料很多,很多api需要自己实践摸索。

PS错误提示无法加载,因为它未经正确签署? 怎么在360浏览器中安装股票行情插件? 高德地图机车版本过低怎么升级 如何用PS设计玻璃上写字特效创意教程 vrayvray怎样调整瓷砖贴图
热门搜索
狮子头图片 剑麻图片 卡通牛图片 怎么把图片上的字去掉 铠甲勇士图片