vue+vue-amap

高德地图开放文档官方文档：JS API 示例 | 高德地图API

其他文档：组件 | vue-amap

main.js中全局引入:

// 高德地图
import AMap from 'vue-amap';
Vue.use(AMap);
// 初始化vue-amap
AMap.initAMapApiLoader({// 高德的keykey: 'xxxx',// 插件集合 （插件按需引入）plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.DistrictSearch','AMap.CircleMarker','AMap.Polyline'// 'AMap.Object3DLayer', 'AMap.Object3D']
});
//高德的安全密钥
window._AMapSecurityConfig = {securityJsCode: 'xxxxxxxxx',
}

以下是地图组件页面代码：

两种效果分别是调用brokenStraightLine（折线）和bezierCurve（贝塞尔曲线）两个方法来实现。

<template><div class="mapBox"><!--显示地图的容器--><div style="width: 100%; height: 100%" id="supPortraitMapContainer"></div></div>
</template><script>export default {name: "mapBlock",props: {},data: function () {return {map: {}, //地图currentline: null}},mounted() {this.initData();},methods: {initData() {const _this = thislet mapConfig = {centerLatitude: 29.932931,centerLongitude: 109.480766,mapStyle: "darkblue",zoom: 5}_this.map = new AMap.Map('supPortraitMapContainer', {// viewMode: '3D',defaultCursor: 'pointer',// showBuildingBlock: false,expandZoomRange: true,zooms: [3, 18],// pitch: 53,zoom: mapConfig.zoom,center: [mapConfig.centerLongitude, mapConfig.centerLatitude], //初始化地图中心点resizeEnable: true, //是否监控地图容器尺寸变化// mapStyle: 'amap://styles/fresh'mapStyle: 'amap://styles/' + mapConfig.mapStyle,})// 地图加载完成事件_this.map.on('complete', function () {// console.log("地图加载完成！");})// 左上角的缩放工具_this.map.plugin(['AMap.ToolBar'], function () {_this.map.addControl(new AMap.ToolBar())})//绑定地图移动与缩放事件_this.map.on('moveend', function () {})_this.map.on('zoomend', function () {})let formatFactoryData = [{pointType:'vendor',factoryName:'德阳工厂',latitude: "31.13288904823836",longitude: "104.17442710355034"},{pointType:'',factoryName: "南昌厂区",latitude: "28.782373059010062",longitude: "115.88005197505477"},{pointType:'',factoryName: "南京厂区",latitude: "31.700012349983922",longitude: "119.01670720064858"},{pointType:'',factoryName: "惠州厂区",latitude: "23.13074800394493",longitude: "114.02536146211665"},{pointType:'',factoryName: "光明厂区",latitude: "22.7375120308681",longitude: "113.94569901087372"}]for (let i = 0; i < formatFactoryData.length; i++) {// 设置“定位点”及其图标、文字let fa = formatFactoryData[i]let iconif (fa.pointType==='vendor') {// 供应商定位点icon = new AMap.Icon({size: new AMap.Size(23, 23),image: require('../../../../../assets/images/portrait定位.png'),imageSize: new AMap.Size(23, 23),anchor: 'center'})} else {icon = new AMap.Icon({ // 我司定位点size: new AMap.Size(23, 23),image: require('../../../../../assets/images/portraitSup定位.png'),imageSize: new AMap.Size(23, 23),anchor: 'center'})}let marker = new AMap.Marker({position: new AMap.LngLat(fa.longitude, fa.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: fa.factoryName,icon: icon})_this.map.add(marker)// 创建纯文本标记let text = new AMap.Text({text: fa.factoryName,anchor: 'center', // 设置文本标记锚点draggable: false,cursor: 'pointer',style: {background: 'none','border-width': 0,'text-align': 'center',color: 'white'},position: [fa.longitude, fa.latitude]})_this.map.add(text)}let vendorPoint = []let ourPoints = []for (let i = 0; i < formatFactoryData.length; i++) {let fac = formatFactoryData[i]if (fac.pointType==='vendor') {// console.log(fac)vendorPoint.push([fac.longitude, fac.latitude])} else {ourPoints.push([fac.longitude, fac.latitude])}}let lineData = []for (let i = 0; i < ourPoints.length; i++) {lineData.push({id: i,path: [vendorPoint[0], ourPoints[i]],events: {//在地图上打点连线的方法click(e) {alert('click polyline')},end: (e) => {const newPath = e.target.getPath().map((point) => [point.lng, point.lat])console.log(newPath)},},editable: false,})}this.brokenStraightLine(lineData, _this.map)let path = [//每个弧线段有两种描述方式[116.39, 39.91, 116.37, 39.91],//起点//第一段弧线[116.380298, 39.907771, 116.38, 39.90],//控制点，途经点//第二段弧线[116.385298, 39.907771, 116.40, 39.90],//控制点，途经点//弧线段有两种描述方式1//第三段弧线[//弧线段有两种描述方式2[116.392872, 39.887391],//控制点[116.40772, 39.909252],//控制点[116.41, 39.89]//途经点],//第四段弧线[116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]//控制点，控制点，途经点，每段最多两个控制点];let bezierCurvePath = [[[104.17442710355034,31.13288904823836,104.18,31.13],[115.88005197505477, 28.782373059010062]],[[104.17442710355034,31.13288904823836,104.18,31.13],[119.01670720064858, 31.700012349983922, 119.02, 31.7]],[[104.17442710355034,31.13288904823836,104.18,31.13],[114.02536146211665, 23.13074800394493, 114.03, 23.13]],[[104.17442710355034,31.13288904823836,104.18,31.13],[113.94569901087372, 22.7375120308681, 113.95, 22.74]],[[104.17442710355034,31.13288904823836,104.18,31.13],[116.397128, 39.916527, 116.4, 39.92]]]// this.bezierCurve(bezierCurvePath, _this.map)},bezierCurve(path, map) {// 贝塞尔曲线：实现带箭头的直线for(let i = 0; i<path.length; i++){let bezierCurve = new AMap.BezierCurve({path: path[i],isOutline: false,outlineColor: '#ffeeff',borderWeight: 1,strokeColor: "#3366FF",strokeOpacity: 1,strokeWeight: 6,// 线样式还支持 'dashed'strokeStyle: "solid",// strokeStyle是dashed时有效strokeDasharray: [10, 10],lineJoin: 'round',lineCap: 'round',zIndex: 50,showDir: true})bezierCurve.setMap(map)// 缩放地图到合适的视野级别map.setFitView([bezierCurve])}},brokenStraightLine(loadArr, map) { // 折线let that = thisif (loadArr.length === 0) {that.$message({message: '没有路线数据',type: 'warning'})} else {for (let i = 0; i < loadArr.length; i++) {let path = loadArr[i].pathlet streetId = loadArr[i].id// 定义地图连接线let polyline = new AMap.Polyline({map: map,path: path,extData: {id: streetId},outlineColor: '#11631b',strokeColor: "#11631b",strokeOpacity: 0.9,strokeWeight: 2,borderWeight: 1,strokeStyle: "solid",strokeDasharray: [0, 0, 0],lineJoin: 'round',lineCap: 'round',zIndex: 20});let lineId = null;polyline.on('click', function (event) {polyline.setOptions({outlineColor: '#31f4e6',strokeColor: "#31f4e6",strokeOpacity: 1,strokeWeight: 4,borderWeight: 1,zIndex: 25});lineId = polyline.getExtData().idif (that.currentline) {that.currentline.setOptions({outlineColor: '#11631b',strokeColor: "#11631b",strokeOpacity: 0.9,strokeWeight: 2,borderWeight: 1,zIndex: 20})}that.currentline = polyline;}, lineId)polyline.setMap(map)}}},// 画边界(疫情区域等)drawBounds(map, level, districtName, fillColor, strokeColor) {if (!level) {level = 'district'}if (!fillColor) {fillColor = '#80d8ff'}if (!strokeColor) {strokeColor = '#0091ea'}//实例化DistrictSearchlet opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: 'all', //返回行政区边界坐标组等具体信息level: level //查询行政级别为 市}let district = new AMap.DistrictSearch(opts)//行政区查询district.setLevel(level)district.search(districtName, function (status, result) {// map.remove(polygons)//清除上次结果let polygons = []if (typeof (result) == 'undefined'|| typeof (result.districtList) == 'undefined'|| typeof (result.districtList[0]) == 'undefined') {return;}let bounds = result.districtList[0].boundariesif (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonlet polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: fillColor,strokeColor: strokeColor,content: 'fgquyu'})polygons.push(polygon)}}map.add(polygons)let overlayGroup = new AMap.OverlayGroup(polygons)overlayGroup.setOptions({zIndex: -1})// 统一添加到地图实例上map.add(overlayGroup)// map.setFitView(polygons);//视口自适应})},}}
</script><style scoped>.mapBox {height: 500px;border: 1px solid #cfcfcf;}
</style>

效果图如下：（项目的需求是把供应商发货地址和我司收货地址用直线连起来，实际上这个是可以做折线的，我觉得就像路线）

<template><div class="mapBox"><!--显示地图的容器--><div style="width: 100%; height: 100%" id="supPortraitMapContainer"></div></div>
</template><script>export default {name: "mapBlock",props: {},data: function () {return {map: {}, //地图currentline: null}},mounted() {this.initData();},methods: {initData() {const _this = thislet mapConfig = {centerLatitude: 29.932931,centerLongitude: 109.480766,isNeedTotal: null,mapStyle: "darkblue",pageNum: null,pageSize: null,searchUrl: "",zoom: 5}_this.map = new AMap.Map('supPortraitMapContainer', {// viewMode: '3D',defaultCursor: 'pointer',// showBuildingBlock: false,expandZoomRange: true,zooms: [3, 18],// pitch: 53,zoom: mapConfig.zoom,center: [mapConfig.centerLongitude, mapConfig.centerLatitude], //初始化地图中心点resizeEnable: true, //是否监控地图容器尺寸变化// mapStyle: 'amap://styles/fresh'mapStyle: 'amap://styles/' + mapConfig.mapStyle,})// 地图加载完成事件_this.map.on('complete', function () {// console.log("地图加载完成！");})// 左上角的缩放工具_this.map.plugin(['AMap.ToolBar'], function () {_this.map.addControl(new AMap.ToolBar())})//绑定地图移动与缩放事件_this.map.on('moveend', function () {})_this.map.on('zoomend', function () {})let formatFactoryData = [{pointType:'vendor',factoryName:'德阳工厂',latitude: "31.13288904823836",longitude: "104.17442710355034"},{pointType:'',factoryName: "南昌厂区",latitude: "28.782373059010062",longitude: "115.88005197505477"},{pointType:'',factoryName: "南京厂区",latitude: "31.700012349983922",longitude: "119.01670720064858"},{pointType:'',factoryName: "惠州厂区",latitude: "23.13074800394493",longitude: "114.02536146211665"},{pointType:'',factoryName: "光明厂区",latitude: "22.7375120308681",longitude: "113.94569901087372"}]for (let i = 0; i < formatFactoryData.length; i++) {// 设置“定位点”及其图标、文字let fa = formatFactoryData[i]let iconif (fa.pointType==='vendor') {// 供应商定位点icon = new AMap.Icon({size: new AMap.Size(23, 23),image: require('../../../../../assets/images/portrait定位.png'),imageSize: new AMap.Size(23, 23),anchor: 'center'})} else {icon = new AMap.Icon({ // 我司定位点size: new AMap.Size(23, 23),image: require('../../../../../assets/images/portraitSup定位.png'),imageSize: new AMap.Size(23, 23),anchor: 'center'})}let marker = new AMap.Marker({position: new AMap.LngLat(fa.longitude, fa.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: fa.factoryName,icon: icon})_this.map.add(marker)// 创建纯文本标记let text = new AMap.Text({text: fa.factoryName,anchor: 'center', // 设置文本标记锚点draggable: false,cursor: 'pointer',style: {background: 'none','border-width': 0,'text-align': 'center',color: 'white'},position: [fa.longitude, fa.latitude]})_this.map.add(text)}let vendorPoint = []let ourPoints = []for (let i = 0; i < formatFactoryData.length; i++) {let fac = formatFactoryData[i]if (fac.pointType==='vendor') {// console.log(fac)vendorPoint.push([fac.longitude, fac.latitude])} else {ourPoints.push([fac.longitude, fac.latitude])}}let lineData = []for (let i = 0; i < ourPoints.length; i++) {lineData.push({id: i,path: [vendorPoint[0], ourPoints[i]],events: {//在地图上打点连线的方法click(e) {alert('click polyline')},end: (e) => {const newPath = e.target.getPath().map((point) => [point.lng, point.lat])console.log(newPath)},},editable: false,})}// this.brokenStraightLine(lineData, _this.map)let path = [//每个弧线段有两种描述方式[116.39, 39.91, 116.37, 39.91],//起点//第一段弧线[116.380298, 39.907771, 116.38, 39.90],//控制点，途经点//第二段弧线[116.385298, 39.907771, 116.40, 39.90],//控制点，途经点//弧线段有两种描述方式1//第三段弧线[//弧线段有两种描述方式2[116.392872, 39.887391],//控制点[116.40772, 39.909252],//控制点[116.41, 39.89]//途经点],//第四段弧线[116.423857, 39.889498, 116.422312, 39.899639, 116.425273, 39.902273]//控制点，控制点，途经点，每段最多两个控制点];let bezierCurvePath = [[[104.17442710355034,31.13288904823836,104.18,31.13],[115.88005197505477, 28.782373059010062]],[[104.17442710355034,31.13288904823836,104.18,31.13],[119.01670720064858, 31.700012349983922, 119.02, 31.7]],[[104.17442710355034,31.13288904823836,104.18,31.13],[114.02536146211665, 23.13074800394493, 114.03, 23.13]],[[104.17442710355034,31.13288904823836,104.18,31.13],[113.94569901087372, 22.7375120308681, 113.95, 22.74]],]this.bezierCurve(bezierCurvePath, _this.map)},bezierCurve(path, map) {// 贝塞尔曲线：实现带箭头的直线for(let i = 0; i<path.length; i++){let bezierCurve = new AMap.BezierCurve({path: path[i],isOutline: false,outlineColor: '#ffeeff',borderWeight: 1,strokeColor: "#3366FF",strokeOpacity: 1,strokeWeight: 6,// 线样式还支持 'dashed'strokeStyle: "solid",// strokeStyle是dashed时有效strokeDasharray: [10, 10],lineJoin: 'round',lineCap: 'round',zIndex: 50,showDir: true // 是否显示箭头})bezierCurve.setMap(map)// 缩放地图到合适的视野级别map.setFitView([bezierCurve])}},brokenStraightLine(loadArr, map) { // 折线let that = thisif (loadArr.length === 0) {that.$message({message: '没有路线数据',type: 'warning'})} else {for (let i = 0; i < loadArr.length; i++) {let path = loadArr[i].pathlet streetId = loadArr[i].id// 定义地图连接线let polyline = new AMap.Polyline({map: map,path: path,extData: {id: streetId},outlineColor: '#11631b',strokeColor: "#11631b",strokeOpacity: 0.9,strokeWeight: 2,borderWeight: 1,strokeStyle: "solid",strokeDasharray: [0, 0, 0],lineJoin: 'round',lineCap: 'round',zIndex: 20});let lineId = null;polyline.on('click', function (event) {polyline.setOptions({outlineColor: '#31f4e6',strokeColor: "#31f4e6",strokeOpacity: 1,strokeWeight: 4,borderWeight: 1,zIndex: 25});lineId = polyline.getExtData().idif (that.currentline) {that.currentline.setOptions({outlineColor: '#11631b',strokeColor: "#11631b",strokeOpacity: 0.9,strokeWeight: 2,borderWeight: 1,zIndex: 20})}that.currentline = polyline;}, lineId)polyline.setMap(map)}}},// 画边界(疫情区域等)drawBounds(map, level, districtName, fillColor, strokeColor) {if (!level) {level = 'district'}if (!fillColor) {fillColor = '#80d8ff'}if (!strokeColor) {strokeColor = '#0091ea'}//实例化DistrictSearchlet opts = {subdistrict: 0, //获取边界不需要返回下级行政区extensions: 'all', //返回行政区边界坐标组等具体信息level: level //查询行政级别为 市}let district = new AMap.DistrictSearch(opts)//行政区查询district.setLevel(level)district.search(districtName, function (status, result) {// map.remove(polygons)//清除上次结果let polygons = []if (typeof (result) == 'undefined'|| typeof (result.districtList) == 'undefined'|| typeof (result.districtList[0]) == 'undefined') {return;}let bounds = result.districtList[0].boundariesif (bounds) {for (let i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonlet polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: fillColor,strokeColor: strokeColor,content: 'fgquyu'})polygons.push(polygon)}}map.add(polygons)let overlayGroup = new AMap.OverlayGroup(polygons)overlayGroup.setOptions({zIndex: -1})// 统一添加到地图实例上map.add(overlayGroup)// map.setFitView(polygons);//视口自适应})},}}
</script><style scoped>.mapBox {height: 500px;border: 1px solid #cfcfcf;}
</style>

这是用贝塞尔曲线实现的将两个地址用直线连起来（折线也可以用showDir:true属性设置箭头）

vue+vue-amap相关推荐

vue require css html,requirejs vue vue.router简单框架
index.html 入口页面html> vue `menu`.`name` base.js requirejs 配置文件(function(){ requirejs.config({ ...
[vue] vue组件里的定时器要怎么销毁？
[vue] vue组件里的定时器要怎么销毁? const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在bef ...
[vue] vue组件会在什么时候下被销毁？
[vue] vue组件会在什么时候下被销毁? 页面关闭.路由跳转.v-if和改变key值个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
[vue] vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？为什么？
[vue] vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么? 需要,原生DOM事件必须要手动销毁,否则会造成内存泄漏个人简介我是歌谣,欢迎和大家一起交流前后 ...
[vue] vue中什么是递归组件？举个例子说明下？
[vue] vue中什么是递归组件?举个例子说明下? 组件自己调用自己,场景有用于生成树形结构菜单个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
[vue] vue的is这个特性你有用过吗？主要用在哪些方面？
[vue] vue的is这个特性你有用过吗?主要用在哪些方面? vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题<ul><li is='my-compon ...
[vue] vue的:class和:style有几种表示方式？
[vue] vue的:class和:style有几种表示方式? :class 绑定变量绑定对象绑定一个数组绑定三元表达式 :style 绑定变量绑定对象绑定函数返回值绑定三元表达式个人简 ...
[vue] vue怎么改变插入模板的分隔符？
[vue] vue怎么改变插入模板的分隔符? optionMergeStrategies类型:{ [key: string]: Function }默认值:{}用法:Vue.config.option ...
[vue] vue如何优化首页的加载速度？
[vue] vue如何优化首页的加载速度? 补充下2楼: ssr直出, webpack压缩HTML/CSS/JS, 首屏css单独提取内联, 关键资源Proload, 图片:不缩放,使用webp.小图 ...
[vue] vue能监听到数组变化的方法有哪些？为什么这些方法能监听到呢？
[vue] vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢? 你说的是vue内部的源码对Array数据的中转代理嘛好像对push, shift等通用方法都做了代理吧! 因为它对中转的数 ...

vue+vue-amap

vue+vue-amap相关推荐

最新文章

热门文章