|
高德地图使用攻略；vue项目引入高德地图实战例子附代码；vue-amap使用步骤和代码示例
在项目中使用地图 我推荐高德地图，理由嘛因为我就会这个。vue中使用高德地图的时候 不要固执的死在vue-amap ，因为这个玩意文档不全，所以还是要依靠高德开放平台：高德开放平台 先上效果图，留住各位帅哥的心： 开发地图项目 当然先去申请key https://console.amap.com/dev/index 步骤就不说了。申请完key之后 大家可以在此网址自定义地图样式的。    好了 进入正题：在index.html中引入高德地图所需js
在项目main.js中引入 vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
console.log(VueAMap)
VueAMap.initAMapApiLoader({
key: '7ab53b28352e55dc5754699add0ad862', //申请的key码需要填写的地方，格式为长串字符数字
plugin: [//按照你的需要，引入地图的哪些功能，不需要下面这么多
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置
"AMap.ControlBar"
],
v: '1.4.4' // 默认高德 sdk 版本为 1.4.4
});
下载所需依赖
npm install vue-amap --save
好了重点来了 ，先看下我的dom和data中定义的数值吧   这是我的数据 和 渲染地图的部分代码 仅借鉴（我也是借鉴别人的）
point(){
let markers = [];
let circles = []
let texts = []
let windows=[]
let polygons = []
let that=this
// 此处为基础数据
let pointMarker=[]
pointMarker=[{
lng:104.072636,
lat:30.657486,
// 不限长度个数，此坐标为该社区每个角落的坐标
path:[[104.072331,30.658017],[104.073404,30.657408],[104.072921,30.656789],[104.071912,30.657362]],
title:"九龙广场",
text: "九龙广场"
},{
lng:104.057815,
lat:30.656951,
// 不限长度个数，此坐标为该社区每个角落的坐标
path:[[104.056312,30.659974],[104.058201,30.658285],[104.060518,30.656356],[104.060588,30.655487],[104.059655,30.655533],[104.059022,30.655672],[104.058625,30.654426],[104.055127,30.656715]],
title:"人民公园",
text: "人民公园"
}
]
pointMarker.forEach((item,index)=>{
// 给标点 赋予 数据
markers.push({
// 这里面的属性 自己需要啥 写啥
//
position: [item.lng,item.lat],
zIndex:20,
title:item.title,
icon: new AMap.Icon({
image: 'https://hbbzw-image.oss-cn-beijing.aliyuncs.com/marker-1.gif',
size: new AMap.Size(60, 60), //图标大小
imageSize: new AMap.Size(60,60)
}),
events: {
click() {
that.windows.forEach(window => {
window.visible = false; //关闭窗体
});
// 此处代码作用：点击 点坐标 展示信息窗体时 让点坐标的坐标位于视图中心并且地图放大到最大。
that.window = that.windows[index];
that.zoom=18
that.zoomchanges=18
that.center=[item.lng,item.lat]
that.$nextTick(() => {
that.window.visible = true;//点击点坐标，出现信息窗体
});
}
}
})
// 多变形覆盖物
polygons.push({
// 设置多边形不可拖拽移动
draggable:false,
// 多变形边框线透明度
strokeOpacity:1,
// 多变形边框线颜色
strokeColor:this.bg(),
// 多变形边填充色透明度
fillOpacity:0,
path:item.path,
rejectTexture:true,//是否屏蔽自定义地图的纹理
events: {
click() {
}
}
})
// 文本
texts.push({
position: [item.lng,item.lat],
// icon:item.url, //不设置默认蓝色水滴
text:item.text,
offset:[70,-10],//窗体偏移
fillColor:this.bg(),
events: {
click() {
}
}
})
windows.push({
position: [item.lng,item.lat],
content:""+""+item.title+""+""+""+"",
offset:[-20,-30],//窗体偏移
visible: false//初始是否显示
})
})
// 加点
this.markers = markers;
// 覆盖层
this.circles = circles
this.polygons = polygons
// 文本
this.texts = texts
//加弹窗
this.windows=windows
},
以上是部分重要代码 仅有参考意义， 详细代码 在我的gitee上，已上传
地址：本人gitee地址
对于高德地图的使用，说实话啊 不难 多看文档，虽然不能一目了然，然能达到事半功倍的效果。我第一次使用的时候 就因为没有多看文档，耽搁了好多时间。
多多支持！！！
|