微信小程序突出显示多边形区域的地图

问题描述

最近在做微信小程序的开发，需求中要突出显示山西省的地图。在网上查阅了一下资料。没有发现太准确解决问题的办法。看来只能靠自己了。另外附上一张我发现的一张比较有意思的图片。

解决问题

在网上没有找到解决办法。只能靠自己解决问题了。
自己其实也有一点自己的想法。

map的组件有一个polygons属性可以绘制一个多边形，并且可以填充颜色。

2.看文档之后发现需要一个经纬度数组。这个经纬度数组还得自己来弄。
我用的是高德地图的API。调用高德地图的API需要在高德地图完成注册。并申请一个key,切记服务平台选择web服务。
我发现返回的是一个坐标字符串，但是我需要的是数组。所以索性直接编写了一个工具类。

package com.kewei.partybuild.util;import net.sf.json.JSONObject;import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** 地址解析工具类* @author zzy* @date 2020/11/12 9:05*/
public class AddressResolutionUtils {//高德地图申请的key 记得改成自己的。private static final String KEY = "d55bd850d****8d928901d9b4593a59";/*** 根据关键词来获取关键词的边界字符串* @param keywords* @return*/public static String getPolyline(String keywords){StringBuffer json = new StringBuffer();try {URL u = new URL("http://restapi.amap.com/v3/config/district?key="+KEY+"&keywords=山西&subdistrict=0&extensions=all");URLConnection yc = u.openConnection();//读取返回的数据BufferedReader in = new BufferedReader(new InputStreamReader(yc.getInputStream(),"UTF-8"));String inputline = null;while((inputline=in.readLine())!=null){json.append(inputline);}in.close();} catch (Exception e) {e.printStackTrace();}String jsonStr=json.toString();JSONObject jsonObject = JSONObject.fromObject(jsonStr);String polylineString = null;if(jsonObject.getJSONArray("districts").size()>0){polylineString = jsonObject.getJSONArray("districts").getJSONObject(0).get("polyline").toString();}return polylineString;}/*** 将字符串转化为小程序需要的格式* @param polylineString* @param num 每隔num经纬度取一组经纬度。(否则返回经纬坐标过多，小程序打开缓慢)* @return*/public static List<Map> String2List(String polylineString,int num){List<Map> list = new ArrayList<>();String zuobiao[] = polylineString.split(";");Map<String,String> map = new HashMap<>();for(int i=0;i<zuobiao.length;i++){if(i%32==0){String arr[] = zuobiao[i].split(",");map.put("longitude",arr[0]);map.put("latitude",arr[1]);}list.add(map);}return list;}public static void main(String[] args) {System.out.println(String2List(getPolyline("山西"),32).toString());}
}

看下返回结果。

将得到的结果方到小程序的js中。
小程序的wxml

<!--pages/starmap/starmap.wxml-->
<view class="mycontainer"><map id="map" class="map" longitude="112.550863" latitude="37.890277" scale="6.5" controls="{{controls}}"bindcontroltap="controltap" bindmarkertap="markertap" polygons="{{polygon}}"bindregionchange="regionchange" bindcallouttap="callouttap" show-location></map>
</view>

小程序的js

// pages/starmap/starmap.js
Page({data: {customCallout:[],markers: [],polygon: [{points:[{"latitude": "40.167456","longitude": "112.734881"},{"latitude": "40.2039","longitude": "112.84504"},...............中间省略{"latitude": "40.185715","longitude": "112.705547"}],strokeWidth:2,strokeColor:"#FF000010",fillColor:"#FF000020"}],controls: []},regionchange(e) {console.log(e.type)},markertap(e) {console.log(e.detail.markerId)},controltap(e) {console.log(e.detail.controlId)},to_ogran:function(){console.log(11);},callouttap(e){console.log(e);wx.navigateTo({url: '/pages/organDetail/orgainDetail',})}})

最后给大家看下效果图。

这字记录就到这里。谢谢观看。

最后欢迎大家访问我的个人博客网站:zShare个人博客

微信小程序突出显示多边形区域的地图相关推荐

微信php echo换行,微信小程序文字显示换行问题
微信小程序文字显示换行问题小程序文字显示换行问题用户在上传图文时,输入换行符.导致我在拿到数据后JSON.parse的时候报错. 大概这样的结构: [{ text:'落魄前端在线炒粉!!!' ...
微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
关于微信小程序不能显示图片
本人场景:wxml <image> 标签设置 src="../../images/中文名.png" 时出现 IOS 端显示没问题,而安卓端不显示图片的问题. 上网一查才 ...
制作esp32-cam拍照上传，微信小程序照片显示的监控小车
前期配件准备 ESP32-CAM开发环境配置程序下载连接小车控制台查看图片微信小程序的开发 1.前期配件准备小车套件(网上购买即可,较为方便的选择) ESP32-CAM (推荐安信可,外加T ...
微信小程序不显示base64位图片
我是用uniapp开发,一开始在微信小程序无法显示base64 图片但是在开发者工具上可以如果是存在自动换行的话可以使用 xxx.replace(/[\r\n]/g,""); ...
微信小程序换行显示指定行数据量
微信小程序换行显示指定行数据量方式1 在wxml进行数据的判断展示 =====page.js 文件Page({data:{testArr:['a0','a1','a2','a3','a4','a5 ...
ESP8266读DHT11温湿度，开发微信小程序实时显示
ESP8266读DHT11温湿度,开发微信小程序实时显示第一.原理讲解第二.ESP8266读取DHT11 第三.温湿度推送到云端第四.微信小程序开发个人可免费注册五个微信小程序账号. 第一.原 ...
微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
微信小程序实时定位（腾讯地图）
微信小程序实时获取地理位置-腾讯地图微信小程序-获取当前城市位置: 一. 我用的腾讯定位服务 https://lbs.qq.com/ 打开之后点击控制台 2.我们创建自己的密匙key 3.下载微信小 ...

微信小程序突出显示多边形区域的地图

问题描述

解决问题

微信小程序突出显示多边形区域的地图相关推荐

最新文章

热门文章