VUE获取百度地图及经纬度

一、申请秘钥

先申请秘钥，然后在首页index.html的head引入下面的js代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

二、配置文件

如果只是第一步，你调用百度地图api时，报错： Bmap is not defined ，那么就配置 webpack 配置文件（webpack.base.conf.js）的module.exports中加个externals：

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: { app: './src/main.js' },
  //百度地图配置20180518
  externals: {
    "BMap": "BMap"
  },
...
}

三、调用

<template>

	<div id="div">
		店名：<input type="text" name="business"><br />
		电话：<input type="text" name="tel"><br />
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		要查询的地址：<input id="text_" type="text" placeholder="请输入位置" name="address" />
		<!--查询结果(经纬度)：<input id="result_" type="text" :value="lng"+"lat" />-->
		<input type="button" value="查询" v-on:click="searchByStationName();" /><br />
		经&nbsp;&nbsp;&nbsp;：<input type="text" name="longitude" id="lngs" :value="longitude"><br />
		纬&nbsp;&nbsp;&nbsp;：<input type="text" name="latitude" id="lats" :value="latitude"><br />
		<div id="container"></div>
	</div>
</template>

js代码：

<script>
	export default {
		name: 'Mapadd',
		data() {
			return {
				location: [
					lng => '',
					lat => ''
				],
				val: ''
			}
		},
		mounted() {
			this.setmap();
			this.index();
		},
		methods: {
			setmap: function() {
				var map = new BMap.Map('container', {
					enableMapClick: true
				}); // 创建Map实例
				map.centerAndZoom(new BMap.Point(116.413387, 39.910924), 11); // 初始化地图,设置中心点坐标和地图级别
				//添加地图类型控件
				map.addControl(new BMap.MapTypeControl({
					mapTypes: [
						BMAP_NORMAL_MAP,
						BMAP_HYBRID_MAP
					]
				}));
				map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
				map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
				const _this = this
				map.addEventListener('click', function(e) {
					_this.location.lng = parseFloat(e.point.lng).toFixed(3)
					_this.location.lat = parseFloat(e.point.lat).toFixed(3)
					alert(_this.location.lng + "," + _this.location.lat);
				})
			},
			searchByStationName: function() {
				var map = new BMap.Map('container', {
					enableMapClick: true
				}); // 创建Map实例
				map.clearOverlays(); //清空原来的标注
				var localSearch = new BMap.LocalSearch(map);
				localSearch.enableAutoViewport(); //允许自动调节窗体大小
				var keyword = document.getElementById("text_").value;
				localSearch.setSearchCompleteCallback(function(searchResult) {
					var poi = searchResult.getPoi(0);
					alert(poi.address);
					//document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
					map.centerAndZoom(poi.point, 13);
					var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
					map.addOverlay(marker);
					document.getElementById("lngs").value = poi.point.lng;
					document.getElementById("lats").value = poi.point.lat;
					marker.addEventListener("click", function() {
						this.openInfoWindow(infoWindow);
					});
					marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
				});
				localSearch.search(keyword);
			},
			index: function() {
				$.ajax({
					url: "",
					dataType: "json",
					type: "get",
					success: function(date) {
						date.forEach(function(v) {
							$('#sheng').append("<option value='" + v.Id + "'>" + v.Name + "</option>");
						});
					}
				})
			}
		},
		shi: function() {
			alert(1);
		}
	}
</script>

样式：

<style>
	#container {
		position: absolute;
		margin-top: 30px;
		width: 730px;
		height: 590px;
		top: 50;
		border: 1px solid gray;
		overflow: hidden;
	}

	#text_ {
		margin-right: 100px;
	}

	#div {
		width: 730px;
		margin: auto;
	}
</style>

效果如下（虽然样式不好看，但还是完全可以用的）:

ps：如果地图半天不出来，八成是网络问题，请确保你的网速特别好！！！