【html5百度地图】简单使用

╰半夏微凉° 2022-04-21 14:21 405阅读 0赞

今天本想着使用下google地图的API，没想到呢，国内这网速又要让我吐槽一番。

然后想想，好吧，百度好歹也是国产精英，然后去百度开发者网站看了下，果然不赖，而且和google map用法也是大同小异。

geolocation是navigator的一个属性，它是一个地理位置对象，要使用这个对象，首先需要去检测浏览器是不是支持，如果对JS比较熟悉，那么**if(navigator.geolocation)**也不是很难理解。在这个对象里有一些方法，例如获得位置getCurrentPosition()，这个也是最重要的方法，这个方法中可以有3个参数，我在这里也就介绍第一个参数，后两个参数如果有兴趣，可以去查阅ECMAScript规范，第一个参数是一个回调函数，这个函数可以传一个参数，它是关于地理位置信息，如坐标、地址等等,要想调用百度地图并且显示当前位置，那我们可以先把你所处的位置确定下来

** var latitude = position.coords.latitude;  
        var longitude = position.coords.longitude;**

这里需要说明一下，如果使用的是PC或者笔记本的话，获得位置是使用你IP地址所获得的，这是最不理想的一种获得位置的方法，获得的地理信息多半是你上网的服务器所在的。如果想要获得更高端的、更准确的，那你必须使用GPS，所以移动的效果要好得多，因为PC调用和移动调用是一样的，这里也只是介绍如何使用，所以就没必要去纠结了。

接下来就是调用百度API的事情了，首先必须要做的是将百度API引用到当前页面中

**<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>**

这里的1.4代表API的版本，

**// 创建Map实例**

**        var map = new BMap.Map("container");   **

**//创建点坐标，维度、精度**

**var point = new BMap.Point(longitude, latitude);**

**//初始化地图,设置中心点坐标和地图级别。  
        map.centerAndZoom(point, 15);**

**  //创建标注  
        var marker = new BMap.Marker(point);                     **

** //将标注添加到地图中  
        map.addOverlay(marker);                                   **

关于Marker对象，在百度文档中还有更多的样式，你也可以自己定制你需要的，如果有需要，也可以一起讨论下。

![1356787069_9297.png][]

[1356787069_9297.png]: https://img-my.csdn.net/uploads/201212/29/1356787069_9297.png

发表评论取消回复

表情：

评论列表（有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS百度地图简单配置

基础类： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="te

小灰灰/ 2023年07月06日 09:49/ 0 赞/ 60 阅读

相关 js获取百度html,javascript使用百度地图api和html5特性获取浏览器位置

![5268f80b9b1e01f982625ef6fac83ca1.png][] 代码如下: 点击这个按钮，获得您的位置：试一下 var x=document.ge

àì夳堔傛蜴生んèń/ 2022年10月06日 11:53/ 0 赞/ 206 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 442 阅读

相关百度地图

百度地图Demo 详情请看 [http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

太过爱你忘了你带给我的痛/ 2022年07月13日 10:59/ 0 赞/ 561 阅读

相关 html百度地图使用记录

map.panTo(new\_point); 需要在当前窗口下才能调用成功。tab要切换到才能调用有效果 ![Image 1][] var

Love The Way You Lie/ 2022年06月09日 03:08/ 0 赞/ 348 阅读

相关 html页面插入百度谷歌地图,react中插入百度地图

一、百度地图 1、打开“百度地图生成器”的网址：http://api.map.baidu.com/lbsapi/creatmap/index.html 2、在“1.定位中心

青旅半醒/ 2022年05月21日 05:24/ 0 赞/ 397 阅读

相关【html5百度地图】简单使用

今天本想着使用下google地图的API，没想到呢，国内这网速又要让我吐槽一番。然后想想，好吧，百度好歹也是国产精英，然后去百度开发者网站看了下，果然不赖，而且和googl

╰半夏微凉°/ 2022年04月21日 14:21/ 0 赞/ 406 阅读

相关简单的百度地图Demo

访问[http://api.map.baidu.com/lbsapi/creatmap][http_api.map.baidu.com_lbsapi_creatmap] ![

Myth丶恋晨/ 2022年04月02日 15:44/ 0 赞/ 376 阅读

相关百度地图API的简单使用

jsdemo：[http://lbsyun.baidu.com/jsdemo.htm\a1\_2][http_lbsyun.baidu.com_jsdemo.htm_a1_2]

男娘i/ 2021年07月26日 12:27/ 0 赞/ 610 阅读

相关 HTML中嵌入百度地图api

1.点击[此处][Link 1]进入百度地图API创建 2.可以根据自己的喜好进行设置 ![70][] 3.生成完之后选择第二步获取代码 ![70 1][] 4.将

逃离我推掉我的手/ 2021年06月11日 15:13/ 0 赞/ 675 阅读