小程序地图覆盖物

❶ 微信小程序地图

你是在学习吗

❷ 小程序可以在地图加上商家图标吗

一、在开发微信小程序地图的过程中，有这样一个需求，用户发表祝福语，然后存入数据库，可以在地图上显示用户头像并且点击用户头像时显示祝福语。

二、自己在开发时遇到的问题：

1.微信头像是网络图片，而地图的markers中的iconPath只能使用本地图片

2.将网络图片缓存到本地，但是因为小程序的异步执行导致图片不能显示

三、解决办法：

1.解决微信头像是网络图片的问题，可以使用wx.downloadFile({})方法来将头像缓存到本地，然后再将本地路径赋给iconPath即可，第一个不能使用网络图片的问题解决。

2.异步请求导致本地缓存的图片不能在地图上显示，我的解决办法是，先通过request请求获取到祝福语后，用for循环赋值给markers，iconPath路径填写一个本地路径，同时调用一个方法，获取当前用户头像的本地缓存路径，获取成功后赋值给markers中每个对象的iconPath，所以一般来说，地图上的图片会有切换，首先显示的是本地的统一的图片，经过一段时间的请求后，图片一个个变为用户头像。

四、相关操作代码

getBlessing: function(){
var that = this;
var getUserPic = function (pic_url,i) {
let cachePath;
if(pic_url==null || pic_url=='') return;
wx.downloadFile({
url: pic_url,
success: (pathInfo) => {
// pathInfo.path 这是下载成的缓存链接，模拟器marker有时不支持http开头，真机不影响，得去掉http:/
cachePath = pathInfo.tempFilePath.replace("http:/", '').replace("https:/", '')//真机中无需replace，都支持，
var mak = "markers[" + i +"].iconPath";
that.setData({
[mak]: cachePath
})
}
})

}

wx.request({
url: '你的后台请求地址',
method: 'POST',
success: function (res) {
var list = res.data.list;
var tempArr = [];
var includeArr = [];
var item = {};
var includeItem = {};
for (var i = 0; i < list.length; i++) {
var pic = getUserPic(list[i].user.user_pic,i);
item = {
iconPath: '/images/icon/small-logo.png',
id: list[i].id,
latitude: list[i].latitude,
longitude: list[i].longitude,
width: 30,
height: 30,
alpha: 0.8,
callout: {
content: list[i].content,
color: '#FFFFFF',
fontSize: 10,
borderRadius: 10,
bgColor: '#F44336',
padding: 5,
display: 'BYCLICK',//'BYCLICK':点击显示; 'ALWAYS':常显
}
}

includeItem = {
latitude: list[i].latitude,
longitude: list[i].longitude,
}
tempArr.push(item);
includeArr.push(includeItem);
}
that.setData({
markers: tempArr,
includepoints: includeArr,
count: res.data.count
})
console.log(that.data.markers)
}
})
},
五、效果截图

❸ 小程序地图可以更改默认蓝色定位圆吗

设置里面导航设置。最底下有个个性车标

❹ 百度地图api如何添加多个圆形覆盖物

//创建圆对象
var circle = new BMap.Circle(r.point, 50, {
strokeColor : "blue",
strokeWeight : 1,
fillColor : "#E2E8F1",
fillOpacity : 0.6
});
//画到地内图上面容
map.addOverlay(circle);

circle = new BMap.Circle(r.point, 100, {
strokeColor : "red",
strokeWeight : 1,
fillColor : "#ccc",
fillOpacity : 0.6
});
//画到地图上面
map.addOverlay(circle);

❺ 微信小程序 地图多个markers怎么赋值

先定义一个变量markers_new ，将多个markers push进去

❻ 微信小程序设置地图组件的covers的iconPath属性怎么设置都无效

app.json文件面看自tabBar写

"tabBar":{
"selectedColor": "#3cc51f",
"list":[{
"pagePath":"pages/index/index",
"iconPath":"images/icon_home.png",
"selectedIconPath":"images/icon_home_selected.png",
"text":"主页"
},{
"pagePath":"pages/car/index",
"iconPath":"images/icon_home.png",
"selectedIconPath":"images/icon_home_selected.png",
"text":"购物车"
},{
"pagePath":"pages/member/index/index",
"iconPath":"images/icon_member.png",
"selectedIconPath":"images/icon_member_selected.png",
"text":"员"
},{
"pagePath":"pages/store/index/index",
"iconPath":"images/20170811112822.png",
"selectedIconPath":"images/20170811113017.png",
"text":"商家"
}]
}
我知道设置5少没留意 能设置太少吧 设置几试试

❼ 微信小程序能使用海外版的地图开发应用吗

这里贴下主要代码介绍下：
先是wxml文件：
<map id='parkingMap' class='mp_map' longitude="{{lon}}" latitude="{{lat}}" scale='14' markers='{{markers}}' controls='{{controls}}' bindcontroltap='controltap' bindmarkertap='markertap' show-location='true' bindregionchange='regionchange' bindtap='clickOther'> 1

标签里的属性API文档里都有介绍，应该没什么好说的了；
可以看到在地图上有标记p，点击需要有提示信息，查了下微信map上面无法在继续添加覆盖物，然后看了API文档有个cover-view，于是就用这个来做了个提示信息：

<cover-view class='parkingName'>{{parkingName}}</cover-view>

<cover-view class='space'>
<cover-view class='totalNum'>总车位：<cover-view style='color:red'>{{totalNum}}</cover-view></cover-view>
<cover-view class='leftNum'>剩余车位：<cover-view style='color:red'>{{leftNum}}</cover-view></cover-view>
</cover-view>

</cover-view>

<cover-view class='right'>
<cover-image src='../../image/arrow_right.png' class='arrow'></cover-image>
</cover-view>

</cover-view>
123456789101112131415

注意这里是要添加到map标签里面：<map> <cover-view> </cover-view></map>
加了个if判断，点击地图上的P才显示；
js文件：
初始化data：
//定义全局变量var longitude, latitude, mapCtxvar centerLongitude, centerLatitude, windowWidth, windowHeight /**
* 页面的初始数据
*/
data: {
lon: '',
lat: '',
is_show: false,
parkingName:'',
totalNum:'',
leftNum:'',
markers: [],
controls: []
},12345678910111213141516

首先是获取定位，使用微信小程序API提供的方式：
getloca:function(){
var that = this
var time
wx.getLocation({
type: "wgs84 ",
success: function (res) {
console.log(res.latitude)
console.log(res.longitude)

latitude = res.latitude
longitude = res.longitude
centerLatitude = latitude
centerLongitude = longitude
that.setData({
lat: res.latitude,
lon: res.longitude,
})
},
fail: function (res) {

}
})
},

在实际测试中，发现有的android机掉用改API就是无法定位，测试过所需要的权限都有，最后尝试了下网络地图，居然发现成功了，一下是网络地图定位（具体可以查看网络地图小程序API）的方式：
//引入网络地图apivar bmap = require('../../libs/bmap-wx.min.js');//网络api定位我的位置
getLocaByBM: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;
console.log(wxMarkerData)
centerLatitude = wxMarkerData[0].latitude
centerLongitude = wxMarkerData[0].longitude

that.setData({
markers: wxMarkerData
});
that.setData({
lat: wxMarkerData[0].latitude
});
that.setData({
lon: wxMarkerData[0].longitude
});
} //好像必须要加这个
BMap.regeocoding({
fail: fail,
success: success,
iconPath: '../../image/center.png',
iconTapPath: '../../img/center.png',
width:23,
height:40
});
},2425262728293031323334353637

好吧，这次的测试结果苹果，小米，华为，三星均能正常定位了；希望微信以后能改善这个问题吧。
不过这里需要注意一个问题，小程序是基于腾讯地图（使用火星坐标），网络地图定位出来的坐标需要转换才能正确的标识，文末会贴出转换的代码；
下面是map的操作了，常见的几种添加markers，controls，地图移动时的监听处理；
先介绍地图移动的监听处理：
这里可以结合微信API文档来看会更清晰（文笔不好，写的有些乱），先获取map对象：

❽ 微信小程序地图覆盖物可以带字吗

你去好建小程序看看哇，他们是小程序第三方平台，很多模块都是免费的。直接添加都可以用了。

❾ 微信小程序地图覆盖物可以带字吗

微信小程序api提供的 //打开地图 wx.openLocation({
longitude: Number(longitude),
latitude: Number(latitude),
name: name,
address: address,
scale:1

❿ 如何在微信小程序里，调入百度地图后。实现输入多个坐标，可在地图上同时标记出来的功能

可以定义多个data变量分别来储存相对应的坐标，之后通过事件相对应操作。

简单获取坐标我推荐“经纬度卫星地理图”

实用工具