如何在HTMl网页中插入百度地图

如何在HTMl网页中插入百度地图,第1张

1、登录百度地图api,地址:http://api.map.baidu.com/lbsapi/creatmap/index.html

2、设置你的地理位置,以北京大学为例子如图:

3、简单设置下地图功能,也可以不设置。地图的宽度和高度根据网页空间的大小设置就可以。

4、设置地图信息标注,这个有利于查看地图的人一眼就看到自己在什么位置,而且也很清楚的标注了你所要标注地点的名称。

5、设置以后查看效果:

6、另外两个也是标注工具,使用方法和这个是一样的。

7、获取代码,以上都设置好了以后,就可以获取地图代码了

8、复制地图代码插入到网站的页面源文件中,如果你是在网站后台编辑中想要插入地图,就点击后台的源代码按钮,直接将地图代码复制进去就可以。

这个不难,主要是注册开发者,创建应用,然后通过JSAPI在html网页中引入3D地图,下面我简单介绍一下实现过程,主要内容如下:

1.首先,注册高德地图开发者,这个直接在官网上注册,输入必要信息就行,如下:

2.注册完成后,进入个人中心,依次点击“应用管理”->“我的应用”->“创建新应用”,如下,这里输入应用名称,选择类型就行:

接着就需要为应用添加key值,点击右上角的+号,就会d出添加窗口,这里我们选择“Web端(JSAPI)”,如下:

添加key值成功后,就会在应用列表中看到刚才添加的key值,如下,后面的代码中需要用到这个key值:

3.最后就是编写代码,在html页面中引入3D地图了,如下,代码很简单,主要是创建div容器,然后通过JS引入地图到这个容器中,这里需要JSAPI版本在1.4.0以上,指定地图模式为3D,key值替换成自己应用的key值:

用浏览器打开这个html页面,效果如下,已经成功引入3D地图:

至此,我们就完成了在html页面中引入高德3D地图。总的来说,整个过程不难,代码量也不是很多,只要你熟悉一下流程和相关示例,很快就能掌握的,官网提供了非常丰富的开发文档,非常适合初学者学习,感兴趣的可以搜一下,网上相关资料也很多,可以借鉴一下,希望以上分享的内容能对你有所帮助吧,也欢迎大家评论、留言。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11947587.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存