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内容


弹出框没写

你可能感兴趣的:(vue-quasar引入高德地图及如何添加点标记)