web实现小程序chooseLocation api （使用腾讯地图，使用微信jssdk）

最新推荐文章于 2024-07-11 14:21:02 发布

weixin_33896069

最新推荐文章于 2024-07-11 14:21:02 发布

阅读量1.4k

点赞数

文章标签： javascript json python ViewUI

原文链接：https://my.oschina.net/maxdeath/blog/3002549

版权

本文介绍了如何在Vue单页面应用中实现微信小程序的chooseLocation API，通过引入腾讯地图的QQMap SDK，并结合微信JS-SDK，解决打包时未注册JS的问题，提供地图选择位置功能。

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

2019独角兽企业重金招聘Python工程师标准>>>

首先项目为单页面vue项目

在index中引入需要的qqmap.js（这里会有一个小问题，没有注册的js，在打包时，不会打包，所以请去index.ejs去注册）

下面是代码

<template>
  <div class="main">
    <div class="topBar">
      <wx-button :size="'mini'"
                 @click="chooseFail">取消</wx-button>
      <span style="line-height: 2.3;color:black;font-weight: 900;">位置</span>
      <wx-button :type="'primary'"
                 :size="'mini'"
                 @click="chooseOK">确定</wx-button>
    </div>
    <div class="searchBar">
      <wx-input :placeholder="'搜索'"
                style="width:90%;margin-left: 5%;height: 0.3rem;border-radius: 3px;"
                @change="searchAddress"></wx-input>
    </div>
    <div id="container1"
         :style="'height:'+height+'px;'"></div>
    <div class="addressList">
      <div class="item"
           v-for="(item,index) in list"
           @click="chooseAddress(index,item.latLng.lat,item.latLng.lng)">
        <div style="display:flex;flex-direction: column;width:80%">
          <span class="address"
                style="font-size:16px;font-weight: 600;">{
   {item.name}}</span>
          <span class="address"
                style="font-size:12px;">{
   {item.address}}</span>
        </div>
        <div style="text-align:right">
          <img v-show="item.ischeck"
               src="https://res.o2o.cn/img/0611a8fb49de4d0db9321541347dc5a4.png">