微信小程序使用地图map (详细)

梁小茹

已于 2022-04-27 11:01:38 修改

阅读量1.1w

点赞数 7

分类专栏：小程序地图使用文章标签：小程序

于 2022-04-27 10:52:18 首次发布

本文链接：https://blog.csdn.net/weixin_46653486/article/details/124444537

版权

本文介绍了如何在微信小程序中使用地图功能，包括通过QQMap-WX-JSSDK实现地理定位，并提供了相关代码示例，帮助开发者快速理解和应用。

摘要由CSDN通过智能技术生成

直接看代码：
可直接赋值实现，图标可根据自己需要更改
在这里插入图片描述

   <view class="top">
        <map wx:if="{
  {markersStatus}}" class="map" id="myMap" scale="{
  {scale}}" longitude="{
  {longitude}}" latitude="{
  {latitude}}" markers="{
  {datatlist}}" bindregionchange="mapChange"  show-location='true'>
        </map>
        // 这个是上图灰色图标  点击可回到初始位置
        <view class="nav-panel">
            <image class="icon-location" bindtap="getCenterLocation" src="https://applets.jinchehui.com/static/images/icon_location_2.svg" bindtap="getCenterLocation"></image>
        </view>
    </view>
    <van-dialog id="van-dialog" />

小程序地理定位qqmap-wx-jssdk.js：qqmap-wx-jssdk.js
点击可进行下载里边的：下载微信小程序JavaScriptSDK


var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js'); //自行根据文件放置
var qqmapsdk;
qqmapsdk = new QQMapWX({
    key: '申请的key'
});
import Dialog from '../../miniprogram_npm/&#