在vue2中使用百度或者谷歌地图

在vue项目的开发过程中，我们会需要用到地图显示功能，那么如何在vue项目中引用百度地图或者谷歌地图呢？下面是我自己在开发过程中的引用方式，如果有更好的方式，欢迎提出。

一、在index.html文件的头部引入地图

其中src是引入地图的url，ak是你在地图官网申请的开发者公钥
二、在webpack.base.conf.js文件中的module.exports添加配置
externals:{
‘BMap‘: ‘BMap‘
}
三、执行npm install
四、在需要地图的组件内import BMap from ‘BMap‘，在想要显示地图的div中 定义id，接下来只有根据官方文档
中 的步骤在created中初始化你想要的地图便可，下面是我自己做的小栗子：
PS：高德地图和百度地图的实现方式基本一致（高德地图的配置是AMap），就看你需求里是要使用哪个咯。

原文地址：http://blog.51cto.com/13561893/2061487

时间： 2024-10-09 04:33:10

在vue2中使用百度或者谷歌地图的相关文章

javaweb中使用百度、谷歌地图进行定位

第一种  百度 直接上代码: <!DOCTYPE> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <ti

百度与谷歌地图瓦片组织方式对比

转自http://www.cnblogs.com/janehlp/archive/2012/08/27/2658106.html 百度是从中心点经纬度(0,0)度开始计算瓦片,在第1级时百度将世界地图分为4块. 中心点右上部分(中国地区)占1块. 谷歌是从左上角经纬度(-180,90)度开始计算瓦片,在第1级时谷歌将世界地图分为1块. 在第2级时,百度地图(中心点右上部分)分为2块, 这是因为在这级百度的地图分辨率为65536米/像素,分辨率=math.pow(2,(18 - n)). WGS8

百度与谷歌地图坐标转换代码(转)

1 <?php 2 //1.GCJ-02,国测局02年发布的坐标体系.又称“火星坐标”.谷歌,腾讯,高德都在用这个坐标体系. 3 //2.BD-09,百度坐标系 4 //GCJ-02转换BD-09 5 function GCJTobaidu($lat, $lng){ 6 $v = M_PI * 3000.0 / 180.0; 7 $x = $lng; 8 $y = $lat; 9 10 $z = sqrt($x * $x + $y * $y) + 0.00002 * sin($y * $v);

百度地图和谷歌地图使用的地理位置坐标标准以及转换

最近在使用百度地图和谷歌地图搜集和处理数据,发现百度和谷歌地图使用的地理位置坐标标准有很大的不同.首先,百度地图的卫星地图和街道地图使用的都是BD-09标准,该标准是在中国国测局地理坐标标准GCJ-02的基础上加密生成.谷歌卫星地图在中国和世界上使用的都是WGS-84标准,但是谷歌街道地图在中国使用的是GCJ-02标准,在世界上其他国家使用的依然是WGS-84标准.在中国之所以使用GCJ-02标准,是因为相关国家的规定要求中国境内的电子地图必须使用原始坐标加密后的GCJ-02标准,以保护国家的地

Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信

Vue2.0与 [百度地图] 结合使用: 1.vue init webpack-simple vue-baidu-map 2.下载axios cnpm install axios; 3.在main.js中引入axios,并使用 import axios from 'axios' /* 把axios对象挂到Vue实例上面,其他组件在使用axios的时候直接 this.$http就可以了 */ Vue.prototype.$http = axios; 4.引入百度地图的js秘钥--->最好在inde

如何在网页中添加百度地图

现在大多数网站都会在联系地址页面插入地图,鉴于目前谷歌网址不能打开的原因,因此百度地图应该成为网站开发者的首选. 楼主因为要搞这个小东西,所以顺便发一篇博客分享,其实网上资料很多,楼主也是参考了网上达人资料,主要目的是为了方便以后自己查看啦! 首先,打开百度地图生成器网址:http://dev.baidu.com/wiki/static/map/API/tool/creatMap/ 点击地图快速生成器,进入选择编辑页面,这里有三步: 第一步是定位中心点,意思就是选择你想要设置的大体位置. 第二步

基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图

1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 展示效果如下: 2. 地图瓦片下载工具及配置 工具下载链接: http://pan.baidu.com/s/1qYoHj4K 密码: ehgh 工具使用方法: 数据库配置 打开工具目录中的 MapDownloader.exe.config 文件.根据实际情况填写如图中的配置信息. 地图瓦片图下载

Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图

标签: Android百度地图API Key  分类: Android 百度地图开发(2)  最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不多,本篇文章就带领大家在自己的Android项目中加入百度地图的功能,接下来我会写一系列关于百度地图的文章,欢迎大家到时候关注!   一 申请API key 在使用百度地图之前,我们必须去申请一个百度地图的API key,申请地址http://lbsyun.baidu.com/a

Android应用中使用百度地图API定位自己的位置（二）

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终