|
前言
当我们在使用一些地图相关软件的情况下，他会显示选择那种。一般都有高德地图，百度地图等。那么我们在微信小程序中也想使用这种功能需要怎么办呢？
本文地址链接 微信小程序-百度地图SDK官方文档
微信小程序地图插件系列其他文章 微信小程序地图插件系列（一）：微信小程序使用高德地图
效果展示
地点 上面坐标图片路径需要自己更换。
一、准备阶段
1、在百度地图开发平台中注册成为开发者。2、申请开发者密钥（AK），其中需要填写小程序appid。3、下载并解压百度地图微信小程序SDK
二、快速上手
1、创建一个小程序2、创建一个map文件夹，并创建page页面3、打开map.js文件，用下面的代码完全替换原代码。
// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.js');
var wxMarkerData = [];
Page({
data: {
markers: [],
latitude: '',
longitude: '',
placeData: {}
},
makertap: function(e) {
var that = this;
var id = e.markerId;
that.showSearchInfo(wxMarkerData, id);
that.changeMarkerColor(wxMarkerData, id);
},
onLoad: function() {
var that = this;
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: '您的ak'
});
var fail = function(data) {
console.log(data)
};
var success = function(data) {
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData
});
that.setData({
latitude: wxMarkerData[0].latitude
});
that.setData({
longitude: wxMarkerData[0].longitude
});
}
// 发起POI检索请求
BMap.search({
"query": '酒店',
fail: fail,
success: success,
// 此处需要在相应路径放置图片文件
iconPath: '../../img/marker_red.png',
// 此处需要在相应路径放置图片文件
iconTapPath: '../../img/marker_red.png'
});
},
showSearchInfo: function(data, i) {
var that = this;
that.setData({
placeData: {
title: '名称：' + data[i].title + '\n',
address: '地址：' + data[i].address + '\n',
telephone: '电话：' + data[i].telephone
}
});
},
changeMarkerColor: function(data, i) {
var that = this;
var markers = [];
for (var j = 0; j
|