Vue中使用百度地圖——根據輸入框輸入的內容，獲取詳細地址

時間 2019-11-17

標籤 vue 使用百度地圖根據輸入內容獲取詳細地址简体版

原文原文鏈接

知識點：在Vue.js項目中調用百度地圖API，實現input框，輸入地址，在百度地圖上定位到準確地址，得到到經緯度html

參考博客：百度地圖的引用，初步瞭解參考博客：http://blog.csdn.net/docallen/article/details/70877925vue

詳細功能修改參考博客： https://www.cnblogs.com/NearTheSea/p/6808093.htmlapi

效果圖：在input輸入框中，輸入要查詢的地址，搜索出相關的名字app

選中詳細地址，地圖定位到詳細地址框架

1.申請密鑰：測試

百度地圖使用一個專門的密鑰(ak)做爲路徑this

在vue框架，的index.html中引入spa

<body>
<div id="app"></div>
<!--引入百度地圖API-->
<script src='http://api.map.baidu.com/api?v=2.0&ak=？&callback=init'></script>
</body>

2.map.js實例：.net

<template>
 <div id="all">
 <input type="text" id="suggestId" name="address_detail" placeholder="地址" v-model="address_detail" class="input_style">
 <div id="allmap"></div>
 </div>
</template>
<script>
 //import {MP} from '../../map'
 export default {
 data(){
 return {
 address_detail: null, //詳細地址
 userlocation: {lng: "", lat: ""},
 }
 },
 mounted(){
 this.$nextTick(function () {

 var th = this
 // 建立Map實例
 var map = new BMap.Map("allmap");
 // 初始化地圖,設置中心點座標，
 var point = new BMap.Point(121.160724,31.173277); // 建立點座標，漢得公司的經緯度座標
 map.centerAndZoom(point, 15);
 map.enableScrollWheelZoom();
 var ac = new BMap.Autocomplete( //創建一個自動完成的對象
 {
 "input": "suggestId"
 , "location": map
 })
 var myValue
 ac.addEventListener("onconfirm", function (e) { //鼠標點擊下拉列表後的事件
 var _value = e.item.value;
 myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
 this.address_detail = myValue
 setPlace();
 });

 function setPlace() {
 map.clearOverlays(); //清除地圖上全部覆蓋物
 function myFun() {
 th.userlocation = local.getResults().getPoi(0).point; //獲取第一個智能搜索的結果
 map.centerAndZoom(th.userlocation, 18);
 map.addOverlay(new BMap.Marker(th.userlocation)); //添加標註
 }

 var local = new BMap.LocalSearch(map, { //智能搜索
 onSearchComplete: myFun
 });
 local.search(myValue);

 //測試輸出座標（指的是輸入框最後肯定地點的經緯度）
 map.addEventListener("click",function(e){
 //經度
 console.log(th.userlocation.lng);
 //維度
 console.log(th.userlocation.lat);

 })
 }

 })
 },
 }
</script>
<style scoped>
 #allmap{
 width: 400px;
 height: 400px;
 font-family: "微軟雅黑";
 border:1px solid green;
 }
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。