总结一下关于高德地图的基本使用
现在高德地图改版到2.0之后都是需要key来开发 , 需要key的可以去开发者平台注册生成,现在社区又很多教程,这里就不进行讲解了,如果你需要更复杂的操作可以到高德地图的API上进行参考使用
你需要提前下载高德地图插件之后进行开发
所需要的网址如下
高德地图开发者平台 :https://lbs.amap.com/
高德地图API地址:https://lbs.amap.com/api/jsapi-v2/guide/webcli/map-vue1
这里我采用了组件封装的方式进行使用,混合js进行开发操作
先上效果图
vue组件代码
<template>
<div class="gaode-map" id="container">
</div>
</template>
<script>
import { mapJs } from './gaodeMap.js'
export default {
name: 'gaode-map',
mixins: [mapJs]
}
</script>
<style lang="less" scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
::v-deep .amap-logo {
display: none!important;
visibility: hidden!important;
}
::v-deep .amap-copyright {
display: none!important;
visibility: hidden!important;
}
</style>
JS代码
// 引入高德地图插件
import AMapLoader from '@amap/amap-jsapi-loader'
import { options } from 'less'
// 编写安全密钥
window._AMapSecurityConfig = {
securityJsCode: '你的安全密钥'
}
export const mapJs = {
data() {
return {
map: null, // 初始化map
marker: null, // 声明点标记
capitals: [
// 地图圆形标记数据 - 这个数据是后端给的,这边练习随便填写
{
center: [116.59877, 39.932143],
popNum: 4
}
]
}
},
mounted() {
this.initMap()
},
methods: {
initMap(data) {
AMapLoader.load({
// 申请好的Web端开发者Key,首次调用 load 时必填
key: " 你的key",
// resizeEnable: true,
// 指定要加载的 JSAPI 的版本,不写时默认为 1.4.15
version: "2.0",
}).then((AMap) => {
var map = new AMap.Map("container", {
//是否为3D地图模式
viewMode: "3D",
//初始化地图级别(地图的远近)
center: [116.59877, 39.932143], //地图开始展示的中心点
zoom: 17, // 缩放层级
});
// 添加圆点标记
for (var i = 0; i < this.capitals.length; i += 1) {
var center = this.capitals[i].center;
var circleMarker = new AMap.CircleMarker({
center: center,
radius: 40 + Math.random() * 10,//3D视图下,CircleMarker半径不要超过64px
strokeColor: 'white',//边框颜色
strokeWeight: 2,//边框粗细
strokeOpacity: 0.5,//边框透明度
fillColor: '#3096FF',//填充色
fillOpacity: 0.5,//填充色透明度
zIndex: 10,
bubble: true,
cursor: "pointer",
clickable: true,
});
//添加圆形轨迹
circleMarker.setMap(map);
}
// 每个圆点添加文本
for (var i = 0; i < this.capitals.length; i += 1) {
var text = new AMap.Text({
text: this.capitals[i].popNum,
anchor: "center", // 设置文本标记锚点
// draggable: true, // 是否可移动文本
cursor: "pointer",
angle: 10,
style: {
"background-color": "rgba(148, 199, 252,0)",
opacity: "1",
// width: "100%",
"border-width": 0,
"text-align": "center",
"font-size": "36px",
"transform":"rotate(-10deg)",
color: "#fff",
},
position: [this.capitals[i].center[0], this.capitals[i].center[1]],
});
text.setMap(map);
// 设置点标记的点击事件
circleMarker.on('click', markerClick) // 设置点击事件
function markerClick(e) {
console.log(e.target);
}
}
}).catch(e => {
console.log(e); // 输出错误
})
},
}
}
以上代码可以直接粘贴复制使用,仅供参考!