我这里使用的mpvue去开发的支付宝小程序,这里记录下使用map地图的过程
<map
id="map"
:longitude="lon"
:latitude="lat"
:polyline="polyline"
:markers="markers"
class="map"
>
</map>
首先polyline
路线
在data
中
polyline: [
{
points: [
{
latitude: 40.038540, longitude: 116.272389},
{
latitude: 40.041407, longitude: 116.274738}
],
color: "#003355",
width: 5,
dottedLine: false,
},
],
这个没什么问题,经纬度在写的时候注意下就好了
如果打开没有显示路线说明初始经纬度不在polyline
范围中
接下来 markers
标点
markers: [
{
id: 1,
latitude:'' ,
longitude: '',
width: 30,
height: 50,
iconPath: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=862691749,1690286630&fm=26&gp=0.jpg",
},
{
id: 2,
latitude:'' ,
longitude: '',
width: 19,
height: 31,
iconPath: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2609580352,4233204507&fm=26&gp=0.jpg",
},
{
id: 3,
latitude:'' ,
longitude: '',
width: 19,
height: 31,
iconPath: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3064920752,1494594665&fm=26&gp=0.jpg",
callout: {
content: "报警位置",
},
}
],
之前 iconPath
图片我使用的../
相对路径 标点图片没有显示但是官方说明
项目目录下的图片路径,不能用相对路径只能用 / 开头的绝对路径。
示例:/pages/image/test.jpg
然后我去使用 /
绝对路径,结果还是不显示,
最后把图片换成url
形式可以解决
my.chooseLocation({})
打开地图选择位置
success:返回值
name
String 位置名称。
address
String 详细地址。
latitude
Number 纬度,浮点数,范围为-90~90,负数表示南纬。
longitude
Number 经度,浮点数,范围为-180~180,负数表示西经。
my.openLocation({})
打开小程序内置地图(可跳转至第三方高德地图App)
my.openLocation({
longitude: this.data.longitude, // 经度
latitude: this.data.latitude, //纬度
name: this.data.name, // 位置名称
address: this.data.address, //详细地址
})
以上预览请到真机调试去看~