vue 点标记 高德地图_vue-quasar引入高德地图及如何添加点标记
一.前提
1. 首先，注册开发者账号，成为高德开放平台开发者
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI )」
二.步骤
在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；
[HTML](javascript:void(0);)
2. 添加div标签作为地图容器，同时为该div指定id属性；
[HTML](javascript:void(0);)
3. 为地图容器指定高度、宽度；
[CSS](javascript:void(0);)
#container {width:300px; height: 180px; }
4. 进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；
[HTML](javascript:void(0);)
三.示例
1.vue中引入地图
npm install vue-amap --save 或是 yarn add vue-amap --save
2.在index.template.html中添加：
3.在vue单页面中创建一个div，
4.script内容
methods: {
off () {
this.ShowOption = false
},
mapGet (data) {
var map = new window.AMap.Map('container', {
resizeEnable: true,
zoom: 11,
showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
keyboardEnable: false, // 地图是否可通过键盘控制，默认为true
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
zoomEnable: true, // 地图是否可缩放，默认值为true
rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
viewMode: '3D'
})
console.log(map)
window.AMap.plugin('AMap.Geolocation', function () {
var geolocation = new window.AMap.Geolocation({
// 是否使用高精度定位，默认：true
enableHighAccuracy: true,
// 设置定位超时时间，默认：无穷大
timeout: 10000,
// 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
buttonOffset: new window.AMap.Pixel(10, 20),
// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
zoomToAccuracy: true,
// 定位按钮的排放位置, RB表示右下
buttonPosition: 'RB'
})
geolocation.getCurrentPosition()
window.AMap.event.addListener(geolocation, 'complete', onComplete)
window.AMap.event.addListener(geolocation, 'error', onError)
function onComplete (data) {
// data是具体的定位信息
}
function onError (data) {
// 定位出错
}
})
// 点标记:
// 创建一个 Icon
var Icon = new window.AMap.Icon({
// 图标尺寸
size: new window.AMap.Size(42, 42),
// 图标的取图地址
// image: ' url(//at.alicdn.com/t/font_2017354_e8snexl0lea.svg#iconfont) format(svg)',
image: '../../../statics/img/shop.svg',
// 图标所用图片大小
imageSize: new window.AMap.Size(145, 45),
// 图标取图偏移量
imageOffset: new window.AMap.Pixel(-9, -3)
})
var Icon1 = new window.AMap.Icon({
// 图标尺寸
size: new window.AMap.Size(42, 42),
// 图标的取图地址
// image: ' url(//at.alicdn.com/t/font_2017354_e8snexl0lea.svg#iconfont) format(svg)',
image: '../../../statics/img/warning.svg',
// 图标所用图片大小,根据所设置的大小拉伸或压缩图片
imageSize: new window.AMap.Size(138, 45),
// 图标取图偏移量
imageOffset: new window.AMap.Pixel(-9, -3)
// 图像相对展示区域的偏移量
})
// 将 icon 传入 marker
var Marker = new window.AMap.Marker({
position: new window.AMap.LngLat(120.551865, 31.297238),
// 基点位置
icon: Icon,
offset: new window.AMap.Pixel(-13, -30)
// 相对于基点的偏移位置
})
var Marker1 = new window.AMap.Marker({
position: new window.AMap.LngLat(120.537309, 31.283473),
icon: Icon,
offset: new window.AMap.Pixel(-13, -30)
})
var Marker2 = new window.AMap.Marker({
position: new window.AMap.LngLat(120.559067, 31.291211),
icon: Icon1,
offset: new window.AMap.Pixel(-13, -30)
})
// 将 markers 添加到地图
// map.add([Marker])
var markerList = [Marker, Marker1, Marker2]
map.add(markerList)
// 设置鼠标划过点标记显示的文字提示
Marker.setTitle('零售店-1')
// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
Marker.setLabel({
offset: new window.AMap.Pixel(0, 0),
// 设置文本标注偏移量
content: "
// 设置文本标注内容
direction: 'right'
// 设置文本标注方位
})
// 设置鼠标划过点标记显示的文字提示
Marker1.setTitle('零售店-1')
// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
Marker1.setLabel({
offset: new window.AMap.Pixel(0, 0),
// 设置文本标注偏移量
content: "
// 设置文本标注内容
direction: 'right'
// 设置文本标注方位
})
// 设置鼠标划过点标记显示的文字提示
Marker2.setTitle('风险警报')
// 设置label标签
// label默认蓝框白底左上角显示，样式className为：amap-marker-label
Marker2.setLabel({
offset: new window.AMap.Pixel(10, 0),
// 设置文本标注偏移量
content: "
// 设置文本标注内容
direction: 'left'
// 设置文本标注方位
})
var that = this
Marker.on('click', function () {
that.ShowOption = true
})
// 点击点标注出现弹出框
}
}
}