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 w