小程序地图服务器域名配置,微信小程序提示:https://api.map.baidu.com 不在以下 request 合法域名列表中...
时间: 2023-06-19 20:09:28 浏览: 899
如果在微信小程序中使用百度地图API,需要在微信小程序的管理后台中进行相关设置,将百度地图的API接口添加到小程序的合法域名列表中。
具体步骤如下:
1. 登录微信公众平台,进入小程序管理后台。
2. 在左侧菜单栏中,点击“设置-开发设置-服务器域名”。
3. 在“request 合法域名”中,点击“添加域名”,将“https://api.map.baidu.com”添加到域名列表中。
4. 点击“保存”按钮,完成设置。
设置完成后,即可在小程序中使用百度地图API接口。
相关问题
微信小程序调用地图api
调用地图 API 需要先获取到开发者密钥(AK),然后通过 HTTP 请求的方式发送请求,获取到对应的地图数据。微信小程序中可以使用微信官方提供的地图组件 `<map>`,同时也可以使用第三方的地图组件。
以下是使用微信官方提供的地图组件 `<map>` 调用地图 API 的示例代码:
```xml
<!-- 在 WXML 文件中引入地图组件 -->
<map latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" />
<!-- 在 JS 文件中设置数据 -->
Page({
data: {
latitude: 39.915,
longitude: 116.404,
markers: [{
id: 0,
latitude: 39.915,
longitude: 116.404,
title: 'Marker 1',
iconPath: '/path/to/icon.png',
width: 50,
height: 50
}]
},
onLoad: function() {
// 发送 HTTP 请求获取地图数据
wx.request({
url: 'https://api.map.baidu.com/geocoder/v2/',
data: {
ak: 'your_ak',
location: this.data.latitude + ',' + this.data.longitude,
output: 'json',
pois: 1
},
success: function(res) {
console.log(res.data);
}
});
}
});
```
其中,`<map>` 组件用于显示地图,`latitude` 和 `longitude` 分别用于设置地图的中心点坐标,`markers` 用于设置地图上的标记点。在 `onLoad` 函数中,通过 `wx.request` 发送 HTTP 请求获取地图数据,其中 `ak` 参数为开发者密钥,`location` 参数为要查询的地理位置坐标,`output` 参数为返回数据格式,`pois` 参数为是否返回周边信息。
注意:在使用地图 API 时,需要遵守 API 的使用规定,不得超过 API 的访问限制。
微信小程序百度地图路线规划
好的,您可以参考以下步骤进行微信小程序百度地图路线规划:
1. 在微信小程序中引入百度地图API,并获取地图实例。
2. 通过百度地图API提供的路线规划服务,获取起点和终点之间的路线信息。可以使用以下API:
```javascript
wx.request({
url: 'http://api.map.baidu.com/direction/v2/driving',
data: {
origin: '起点坐标',
destination: '终点坐标',
ak: '百度地图AK',
output: 'json' // 返回结果的格式,可以是json或xml
},
success: function(res) {
// 处理路线规划结果
}
})
```
3. 在地图上绘制路线。可以使用百度地图API提供的Polyline组件,将路线信息转换为Polyline对象,然后在地图上绘制出来。
```javascript
// 将路线信息转换为Polyline对象
var polyline = [];
var steps = res.data.result.routes[0].steps;
for (var i = 0; i < steps.length; i++) {
var path = steps[i].path.split(';');
for (var j = 0; j < path.length; j++) {
var point = path[j].split(',');
polyline.push({
longitude: parseFloat(point[0]),
latitude: parseFloat(point[1])
});
}
}
// 在地图上绘制路线
mapCtx.includePoints({
points: polyline,
padding: [20, 20, 20, 20]
});
mapCtx.addPolyline({
points: polyline,
color: '#FF0000',
width: 5
});
```
以上就是微信小程序百度地图路线规划的基本流程,您可以根据具体需求进行适当调整。
阅读全文