vue 單純的獲取經緯度 百度與高德 H5

首先用百度的api舉個例子

首先在index頁面引入如下：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=(你的sdk密匙)"></script>

原樣復制粘貼到index里就可以了，記住尾巴的ak是你自己的地圖密匙哦

隨后在想調用的地方寫入如下

var _this = this;
　　if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(
	　　//locationSuccess 獲取成功的話
	　　function(position) {
	　　　　_this.getLongitude = position.coords.longitude;  //position就是我們通過api獲取的信息，而我們想獲取的經緯度就在coords下，隨后將經緯度分別賦值給外部data設定好的變量
	　　　　_this.getLatitude = position.coords.latitude;    //記住如果這里直接寫this可能會導致找不到外部的變量而報錯，所以提前設置一下this的指向
	　　　　alert(_this.getLatitude)　　　　　　　　　　　　　　 //彈出經度測試
	　　},
	　　//locationError  獲取失敗的話
	　　function(error) {
	　　　　var errorType = ['您拒絕共享位置信息', '獲取不到位置信息', '獲取位置信息超時'];
	　　　　alert(errorType[error.code - 1]);
	　　}
	);
　　}

　　如果電腦未授予讀取所在地權限，測出來會出現這種情況：

您拒絕共享位置信息~

我沒找到電腦在哪授權，所以挪到了手機上測試

至於怎么把項目挪到手機上查看可以去下面的鏈接看看哦：

vue-cli   --->   https://www.cnblogs.com/DangerousBaymax/p/9088753.html

普通H5頁面  --->   http://www.cnblogs.com/DangerousBaymax/p/9293746.html

 

手機打開，授權定位，效果如下：

彈出一個經度測試，是成功的，精彩~

如果是用高德地圖的話是用的下面這個鏈接：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.7&key=（你的密匙）"></script>

　　然后獲得經緯度的方式一樣

另外舉個例子，獲取經緯度也可以這么獲取：

首先在密匙后面繼續拼接這么一句:   plugin=AMap.Geocoder

隨后，我們可以這樣-------

　　　　　var map, geolocation;
	//加載地圖，調用瀏覽器定位服務   高德地圖
	map = new AMap.Map('container', {
		resizeEnable: true
	});
	map.plugin('AMap.Geolocation', function() {
		geolocation = new AMap.Geolocation({
		　　　　enableHighAccuracy: true, //是否使用高精度定位，默認:true
		　　　　timeout: 20000, //超過10秒后停止定位，默認：無窮大
		　　　　buttonPosition: 'RB'
		});
		geolocation.getCurrentPosition();
			AMap.event.addListener(geolocation, 'complete', function onComplete(data) {
			var getLongitude = data.position.getLng();
			var getLatitude = data.position.getLat();
			alert(getLongitude+'---'+getLatitude+'我的天') //彈出獲得的經緯度
		}); //返回定位信息
	});