百度地图开放平台使用 JavaScript API 和 在Vue中使用

常见使用

百度地图开放平台 JavaScriptAPI 文档
https://lbs.baidu.com/index.php?title=jspopularGL/guide/helloworld
基本使用
在控制台里创建一个应用，注意应用类型填写的是浏览器端，才可以使用。创建完成查看AK

使用

效果
代码

 <div id="container"></div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的AK">

<script type="text/javascript">
    var map = new BMapGL.Map("container");
    // 创建地图实例 
    map.enableScrollWheelZoom(true);
    var point = new BMapGL.Point(116.404, 39.915);
    // 创建点坐标 
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
    
		//设置提示标签
    var opts = {
        width: 150, // 信息窗口宽度
        height: 60, // 信息窗口高度
        title: "如何找到我们" // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("只要你在，我就在你心里", opts); // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
</script>

在Vue中使用

Vue APi地址
https://dafrok.github.io/vue-baidu-map/#/zh/map/baidu-map

NPM

npm install vue-baidu-map --save

CDN

<script src="https://unpkg.com/vue-baidu-map"></script>

1. 全局引用
   在main.js中注入

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

在文件中使用

<template>
  <baidu-map class="bm-view">
  </baidu-map>
</template>


<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

2. 局部引用
   局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下，按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行，如果引入组件时发生运行时错误，请检查 webpack 的 loader 配置，确认 include 和 exclude 选项命中了组件库。

<template>
  <baidu-map class="bm-view" ak="YOUR_APP_KEY">
  </baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  components: {
    BaiduMap
  }
}
</script>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

常用属性

属性名	描述
center	String
zoom	Number
scroll-wheel-zoom	Boolean