微信小程序的全局地图和局部地图

VIP文章张棺儿zz

已于 2022-10-16 13:42:47 修改

阅读量575

点赞数

分类专栏： javascript css 文章标签：微信小程序小程序

于 2022-10-16 13:42:38 首次发布

本文链接：https://blog.csdn.net/zhangguaner/article/details/127346689

版权

在小程序中，局部地图可设置地图组件进行完成，

wxml：

<view class="Map">
    <map id="map" longitude="{
  {longitude}}" latitude="{
  {latitude}}" show-location="true">
    </map>
</view>

wxss：

.Map{
    width: 100%;
    height: 80%;
    display:flex;
  }
#map{
    width: 100%;
    height: 200px;
}

js：

data: {
        //自定义标记点数组
        markers: [],
        //纬度
        latitude: '',
        //经度
        longitude: '',
}
onLoad: function () {
        var that = this;
        //  获取当前定位的经纬度信息
        wx.showLoading({
            title: "定位中",
            mask: true
        })
        wx.getLocation({
            type: 'gcj02',
            altitude: true, //高精度定位
            //定位成功，更新定位结果
            success: func