【html5百度地图】简单使用

╰半夏微凉° 2022-04-21 14:21 384阅读 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 条评论，384人围观）

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

相关阅读

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

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

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

相关百度地图

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

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

相关百度地图

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

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

相关 html百度地图使用记录

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

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

相关百度地图

PC端定位不准确主要应用到移动端第一、申请百度密钥很简单的几步就搞定第二、引入文件 html 代码效果预览 1 2 3 4 5

朱雀/ 2022年06月05日 04:42/ 0 赞/ 489 阅读

相关百度地图

$(function(){ var BMapInit=function(){ var map =

曾经终败给现在/ 2022年05月23日 09:57/ 0 赞/ 475 阅读

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

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

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

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

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

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

相关简单的百度地图Demo

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

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

相关百度地图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 赞/ 576 阅读