中国互联网地图提供商我们估计就熟知三家：百度地图、高德地图、腾讯地图。三家提供的服务其实也感觉不出来有啥各自的特色，我上大学那会，手机里面默认安装的是百度地图，在合肥出去需要找路的时候就用百度的导航还是挺准的，后来到了大二看一些同学讲高德不错，而且几乎没人用百度地图，他们的手机以 vivo 和 OPPO 居多，估计和我的手机一样也是内置的，不管怎么样，我就去下了高德地图试试，诡异的是刚开始用的时候，从导航的精确度上来讲和百度地图没啥区别，但是没多久就发现，高德的导航老是会偏离目的地，可能和我的手机有关系。反正我也不经常出去，虽然高德导航不准但也用不了几次，就一直用着，不过最近更新出来个实时公交，嗯很不错。
来谈谈项目，一般来讲三家地图插件，想用哪个就用哪个，没啥太大的差别，用的时候注意你使用的啥框架，搜的时候就可以框架名： react + 高德地图插件，然后出来一个 react-amap。
使用框架分为三步：
- 安装对应的插件
- 注册成为开发者，得到一个秘钥
- 组件使用
一、安装vue-baidu-map插件
npm install vue-baidu-map --save
二、申请开发者秘钥
申请开发者秘钥：http://lbsyun.baidu.com/apiconsole/key
激活之后，在应用管理里面创建一个应用我们就会得到一个 ak。
三、使用
- 全局注册
全局注册将一次性引入百度地图组件库的所有组件。
//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" center="北京">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 300px;
}
</style>
- 局部注册
如果有按需引入组件的需要，可以选择局部注册百度地图组件，这将减少工程打包后的容量尺寸。局部注册的 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>
注意：
- BaiduMap 组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为 0 不可见的容器内。
-
没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
放置地图成功
三、个性化配置
首先我们去具体的地点，就比如讲是：中央戏剧学院昌平校区，去这个地址查询下具体的经纬度：http://api.map.baidu.com/lbsapi/getpoint/index.html
如果 center 使用经纬度我们必须制定 zoom 地图展示级别，不然地图不显示：
<baidu-map :center="{lng:116.382337,lat:40.110602}" :zoom="17" class="bm-view"></baidu-map>
:scroll-wheel-zoom="true"//鼠标滚动控制缩放，来看个综合案例：
演示源代码：
<baidu-map
:scroll-wheel-zoom="true"
:center="{lng:116.382337,lat:40.110602}" :zoom="17" class="bm-view">
<bm-marker
:position="{lng:116.382337,lat:40.110602}"
animation="BMAP_ANIMATION_BOUNCE"
title="鼠标移到marker上的显示内容"
>
<bm-label content="我爱中戏的小姐姐"
:labelStyle="{color: 'red', fontSize : '24px'}"
:offset="{width: -70, height: 50}"/>
</bm-marker>
<bm-marker
:position="{lng:116.381659,lat:40.114876}"
:dragging="true"
:offset="{width: 0, height: -50}"
animation="BMAP_ANIMATION_BOUNCE"
:icon="{url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: {width: 300, height: 157}}"
>
</bm-marker>
<bm-marker
:position="{lng:116.378601,lat:40.11361}"
@click="show=true"
>
<bm-info-window :show="show" @close="show!=show" @open="show!=show">我爱北京</bm-info-window>
</bm-marker>
</baidu-map>
在来看一个例子：
<baidu-map
:scroll-wheel-zoom="true"
:center="{lng:116.382337,lat:40.110602}" :zoom="17" class="bm-view">
<bm-marker
:position="{lng:116.382337,lat:40.110602}"
animation="BMAP_ANIMATION_BOUNCE"
title="鼠标移到marker上的显示内容"
>
<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
<!-- 比例尺控件 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" enableGeolocation></bm-navigation>
<!-- 缩放控件 -->
<bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
<!-- 在地图左上角加入地图类型控件 -->
<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_LEFT" :isOpen="true"></bm-overview-map>
<!-- 在地图右下角加入缩略图控件 -->
<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
<!-- 在地图右下角加入定位控件 -->
<!-- <bm-panorama></bm-panorama> -->
<!-- 插入全景控件 -->
</bm-marker>
</baidu-map>
除了这些估计常见的还有个路线图，官网上都有，几乎不要动手敲代码直接复制粘贴就行了。
另外赠送一片文章魔改Chrome的小恐龙游戏：变无敌、999倍速，还能变成马里奥……
作为前端断情况下你一定在谷歌浏览器见到一个小恐龙：
没事你敲敲空格就能让小恐龙跑起来了。现在只要在地址栏输入 chrome://dino，就可以全屏玩。如果你不想死的话，就可以打开控制台输入一下内容：
const game = window.Runner();
game.gameOver = ()=>{};
让小恐龙加速：
Runner.instance_.setSpeed(100);
小恐龙改成马里奥游戏：
审查元素进行替换：
马里奥的图片：
