微信小程序之地图

简介

操作：

1. 申请开发者密钥（key）：
2. 开通webserviceAPI服务：控制台 ->应用管理 -> ->添加key-> 勾选WebServiceAPI -> 保存 (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
3. 小程序示例

1、地点搜索与地址解析

<map id="myMap"
    markers="{
         
  {markers}}"
    style="height:{
         
  {windowHeight}};width:100%;"
    longitude="{
         
  {longitude}}"
    latitude="{
         
  {latitude}}" scale=16>
</map>

2、关键词输入搜索提示

<van-sticky>
    <view>
    <van-search value="{
           
    { backfill }}" shape="round" placeholder="请输入地址" use-action-slot bind:change="getsuggest" bind:search="onSearch">
        <view slot="action" bind:tap="onClick">取消</view>
    </van-search>
    </view>
</van-sticky>

<view wx:for="{
           
    {suggestion}}" wx:key="index">
    
    <view class="list-box" bindtap="backfill" data-title="{
           
    {item.title}}">
        <view style="" id="{
           
    {index}}">{
         
  {item.title}}</view>
        <view style="font-size:12px;color:#666;">{
         
  {item.addr}}</view>
    </view>
</view>

3、逆地址解析

tip

1、在开发测试的时候会发现获取的定位不准确，其实没事的！！！！！是电脑测试的问题，到了手机测试就会准确了的

2、坐标系最好采用gcj02坐标系，会准确