小程序地圖覆蓋物

❶ 微信小程序地圖

你是在學習嗎

❷ 小程序可以在地圖加上商家圖標嗎

一、在開發微信小程序地圖的過程中，有這樣一個需求，用戶發表祝福語，然後存入資料庫，可以在地圖上顯示用戶頭像並且點擊用戶頭像時顯示祝福語。

二、自己在開發時遇到的問題：

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變數分別來儲存相對應的坐標，之後通過事件相對應操作。

簡單獲取坐標我推薦「經緯度衛星地理圖」

實用工具