如何引入百度地图和获取精准获取经纬度坐标

zhaojjjjjj163

已于 2023-05-17 10:35:44 修改

阅读量863

点赞数

分类专栏： WEB WXMINI 文章标签：前端

于 2023-05-15 13:52:12 首次发布

本文链接：https://blog.csdn.net/zhaojjjjjj163/article/details/130682787

版权

WEB 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

WXMINI

3 篇文章 0 订阅

订阅专栏

引入百度地图

百度地图官网

开发手册

百度地图官网注册用户 -> 控制台 -> 认证用户 -> 创建项目 -> 获取ak密钥 -> 替换js中ak秘钥

<head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
</head>

<body>
    <div id="container"></div>

	<script type="text/javascript">
		var map = new BMap.Map("container")    // 创建地图实例  
		var point = new BMap.Point(116.403119,39.915599)    // 创建初始点坐标  
		map.centerAndZoom(point, 10);    // 初始化地图，设置地图中心点坐标和地图显示级别  
		map.enableScrollWheelZoom(true)    //开启鼠标滚轮缩放
	</script>
</body>

小程序引入

引入JS模块

在项目根目录下新建一个路径，下载百度地图微信小程序JavaScript API，解压后的文件中有 bmap-wx.js 文件(压缩版 bmap-wx.min.js )，将其拷贝到新建的路径下，安装完成。

设置请求合法域名

登录微信公众平台－> “开发” －> “开发管理” －> ”开发设置“－> “服务器域名”－> “request 合法域名” －>添加 https://api.map.baidu.com－> 点击"保存并提交"

打开开发者工具－> “项目配置” －> 点击"刷新"，合法域名设置同步完成
示例 -- 地址解析

<view> 
  <map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location="true" markers="{{markers}}" bindmarkertap="makertap"></map> 
</view>

// 引用百度地图微信小程序JSAPI模块 
var bmap = require('../../libs/bmap-wx.js'); //bmap-wx.js文件存放路径
var wxMarkerData = []; 
Page({ 
    data: {
        BMap: null,
    }, 
    onLoad: function() { 
        // 新建百度地图对象 
        this.data.BMap = new bmap.BMapWX({ 
            ak: 'xxx' //百度地图密钥
        });
    },
})