我已经放弃百度地图了,为什么呢?

原因一: 百度地图api太乱不容易查阅

原因二: 百度给出的案例太少,可参考项太少

第三点也是最重要的,百度地图花钱,百度地图花钱,百度地图花钱,

很荣幸,作为国内唯一免费开源大型好用的高德地图成为我的第二个采坑对象。

说说我为什么用nuxt:其实出于私心,我想调研一下nuxt的seo,踩踩nuxt的坑,熟悉一些框架工作流程,以便于后续项目开发;

还有一点是我想把地图抽离出来,来满足公司的各种业务。

好吧,进入正题:

首先,安装nuxt框架:

 npx create-nuxt-app gaode-map

安装时会有一些选项,我是如下选择的:

接着安装一些需要的依赖,scss和axios:

sass安装

npm i scss-loader node-scss --save-dev

然后可以在assets下建一个scss文件,如下:

然后在nuxt.config.js引入该文件:

这样就能用scss了,把所有的scss文件导入到index.scss文件中

axios导入:

官方给了方法

那如何通过自定义配置axios呢?在plugins新建axios.js文件,写入如下代码:

import Vue from 'vue'
import axios from 'axios' //中间可以写配置项 Vue.prototype.$axios = axios

然后你应该懂得了

更改服务端口号:

在nuxt.config.js添加如下配置:

server: {
port: , // default: 3000
host: '0.0.0.0', // default: localhost,
}

接下来来步入正题,导入高德地图

这个有很多种方式,这里介绍两种:

1,全局导入,在nuxt.config.js 里加script标签,将路径和key放在后边(注意要写在head对象里边,类似原生结构)

script: [
{src: "https://webapi.amap.com/maps?v=1.4.15&key=your key"}
]

2.我采用的是这种方式,异步加载地图,除此之外,这种的好处是可以分块加载。我是在plugins目录下新建一个js文件,就叫aMap.js吧,然后写一个类,作为地图的注册

export default function MapLoader() {
return new Promise((resolve, reject) => {
// 全局对象如果存在地图直接将结果抛出
if (window.AMap) {
resolve(window.AMap)
} else {
// 创建script标签并放入cdn链接
var script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = 'http://webapi.amap.com/maps?v=1.3&key=your key&callback=initAMap'
script.onerror = reject
document.head.appendChild(script)
}
window.initAMap = () => {
// 注入相关插件
window.AMap.plugin(['AMap.ToolBar', 'AMap.CircleEditor', 'AMap.PolyEditor'], function () {
//异步同时加载多个插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
// 将结果抛出
resolve(window.AMap)
}
})
}

然后就可以在组件中调用该类了:

import MapLoader from "@/plugins/aMap.js";
mounted() {
  let that = this;
  MapLoader().then(AMap => {
    that.map = new AMap.Map("container", {
    center: [118.02, 39.63],
    zoom: 13
  }).catch(error => {
    console.log('地图加载失败',error)
  })
}

接下来开始搭建地图页面,先来说一下思路,前端负责调用地图组件,画不规则图形,把图形上的点的经纬度给后端,后端查询出该区域里所有的小区返回给前端,这里先接受前端拿到多边形的点经纬度

前端在初始化地图后,在地图里实例化多边形的函数添加到地图,然后点击按钮触发编辑多边形事件,大致代码如下

<template>
<div class="index">
<div>
<el-button class="btn" @click="polyEditor.open()" style="margin-bottom: 5px">开始编辑</el-button>
<el-button class="btn" @click="polyEditor.close()">结束编辑</el-button>
</div>
<div class="main">
<div class="store-list">
<h3>选中的坐标</h3>
<div v-for="(item, index) in alreadeArr" :key=index>
{{item}}
</div>
</div>
<div id="container"></div>
</div>
</div>
</template> <script>
import MapLoader from "@/plugins/aMap.js";
export default {
data() {
return {
num: ,
polyEditor: {},
alreadeArr: []
};
},
mounted() {
let that = this;
MapLoader().then(AMap => {
that.map = new AMap.Map("container", {
center: [118.02, 39.63],
zoom:
}); var path = [
[118.134005, 39.6339],
[118.130915, 39.629607],
[118.122575, 39.630397],
[118.132575, 39.640397]
] var polygon = new AMap.Polygon({
path: path,
strokeColor: "#FF33FF",
strokeWeight: ,
strokeOpacity: 0.2,
fillOpacity: 0.4,
fillColor: '#1791fc',
zIndex: ,
}) that.map.add(polygon)
// 缩放地图到合适的视野级别
that.map.setFitView([ polygon ]) that.polyEditor = new AMap.PolyEditor(that.map, polygon)
// 拖拽点后触发
that.polyEditor.on('adjust', function(event) {
let arr = []
let point = polygon.getPath()
point.forEach(el => {
arr.push({"lat": el.lat, "lon": el.lng})
})
that.alreadeArr = arr
console.log('选中的区域',arr)
// event.target 即为编辑后的多边形对象
}) });
},
methods: { }
};
</script> <style>
* {
margin: ;
padding: ;
}
#container {
width: 1400px;
height: 900px;
margin: auto;
box-shadow: 10px #ccc;
}
</style>

效果如下:

可以看出前端已经拿到了点坐标(后续功能持续更新)

nuxt+高德地图实现多边形区域检索的更多相关文章

  1. 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  2. Nuxt使用高德地图

    事先准备 注册账号并申请Key 1. 首先,注册开发者账号,成为高德开放平台开发者 2. 登陆之后,在进入「应用管理」 页面「创建新应用」 3. 为应用添加 Key,「服务平台」一项请选择「 Web ...

  3. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  4. 【高德地图API】如何获得行政区域?如何制作行政规划图?

    原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap ...

  5. 【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  6. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  7. iOS高德地图让指定区域或者点显示在屏幕中间

    对于高德地图也是一个新手,很多功能看文档,问技术 或者高德群里讨论  群号:204668425 在我们需求中绘制的有 圆 折线 不规则图形 方式,打开地图指定的绘制图形置于屏幕中间 1.首先创建一个数 ...

  8. 百度&高德地图小区景点边界轮廓实现

    经常的我们在使用地图功能时,会发现在选择一个小区或者一个热门景点的时候,地图上面会给出其边界轮廓,能够方便我们知道其范围大小,有时候在我们使用地图组件的时候,也会面临着类似的需求.比如在地图上面标识出 ...

  9. iOS高德地图使用-搜索,路径规划

    项目中想加入地图功能,使用高德地图第三方,想要实现确定一个位置,搜索路线并且显示的方法.耗了一番功夫,总算实现了. 效果 WeChat_1462507820.jpeg 一.配置工作 1.申请key 访 ...

随机推荐

  1. Spring Cloud Contract简介

    转载:https://www.jianshu.com/p/e3277824a10a 和dummy service一样 Spring Cloud Contract是个啥? Spring Cloud Co ...

  2. git 报错

    -bash: git: command not found export PATH=$PATH:/usr/local/git/bin 使用git clone出现 fatal: unable to ac ...

  3. Helm安装服务端tiller出现的问题

    一.首先,我是看尚硅谷视频跟着操作出现了问题,视频链接:https://www.bilibili.com/video/av66617940/?p=58 再说下大概的部署流程 Helm 部署 Helm ...

  4. Dev控件

    在DevExpress程序中使用PopupContainerEdit和PopupContainer实现数据展示 使用PopupContainerEdit和PopupContainerControl制作 ...

  5. python常用函数 H

    heapify(iterable) 堆排序. 例子: heappop(iterable) 弹出堆排序的第一个元素,即最小值. 例子: hasattr(object,attr) 用于确定对象是否有某个属 ...

  6. 1、pip不是内部运行程序 解决方法

    一.方式一 1.切换到pip所在路径: shit+ 右键. 再此处打开运行窗口 2.执行 pip install pytest 脚本即可. 二.方式二,添加环境变量 1.将pip所在的文件路径 添加到 ...

  7. $NOIP2018$ 爆踩全场记

    NOIP2018 Day-1 路还很长. 这里就是起点. 这是最简单的一步,但这是最关键的一步. 联赛就在眼前了,一切好像都已经准备好了,一切好像又都没准备好. 相信自己吧,\(mona\),这绝对不 ...

  8. 谷歌已经对Android的开源严防死守

    上周,沸沸扬扬的Android垄断案把Google又一次推向了风口浪尖,在这次的垄断案中,Google被欧盟起诉赔偿50亿美元,被起诉的其中一个原因是Google对外宣称Android是开放的,但其实 ...

  9. Codeforces 831C--Jury Marks (思维)

    题目链接:http://codeforces.com/problemset/problem/831/C 题意:有一位参赛选手,我们不知道他初始或最后的成绩,但是知道k次评审所加(减)的分数,以及n个在 ...

  10. CF 39E. What Has Dirichlet Got to Do with That?(记忆化搜索+博弈论)

    传送门 解题思路 首先很好写出一个\(O(ab)\)的记搜,但发现这样无法处理\(a=1\)和\(b=1\)的情况,这两种情况需要特判.首先\(a=1\)的情况,就是如果当前选手让\(a+1\)必胜, ...