需求
1、搜索具体地址，自动填写经纬度，并在地图上标记
2、点击地图上一点，可重新填写经纬度并且标记
代码
在dom新建div渲染地图<el-form-item label="店铺地址" prop="address"><el-input v-model="fristForm.address"></el-input><el-inputclass="long-lat"v-model="fristForm.longitude"placeholder="经度"></el-input><el-inputclass="long-lat"v-model="fristForm.latitude"placeholder="纬度"></el-input><el-button size="mini" type="primary" @click="searchKeyword">搜索</el-button></el-form-item><span class="changeAddress">点击地图更换分店定位地址</span><!-- 渲染地图的div容器 --><div id="container" class="mapbox"></div>
js定义地图变量并设置需求
var searchService,geocoder,map,markersArray = [];<script>export default {mounted() {this.init();},methods:{init() {var that = this;var center = new qq.maps.LatLng(39.916527, 116.397128);var map = new qq.maps.Map(document.getElementById("container"), {center: center,zoom: 13});var latlngBounds = new qq.maps.LatLngBounds();qq.maps.event.addListener(map, "click", function(event) {console.log(event);that.fristForm.longitude = event.latLng.getLng(); // 经度that.fristForm.latitude = event.latLng.getLat(); // 纬度if (markersArray) {for (let i in markersArray) {markersArray[i].setMap(null);}}var marker = new qq.maps.Marker({map: map,position: event.latLng});markersArray.push(marker);});geocoder = new qq.maps.Geocoder({complete: function(result) {console.log(result);that.fristForm.longitude = result.detail.location.lng;that.fristForm.latitude = result.detail.location.lat;map.setCenter(result.detail.location);var marker = new qq.maps.Marker({map: map,position: result.detail.location});markersArray.push(marker);}});},},// 搜索地址searchKeyword() {var keyword = this.fristForm.address;this.clearOverlays(markersArray);//根据输入的城市设置搜索范围// searchService.setLocation("北京");//根据输入的关键字在搜索范围内检索if (keyword) {// searchService.search(keyword);geocoder.getLocation(keyword);} else {alert("请输入地址");}},}</script>
文档参考
以上代码使用的是jsapi功能，目前对应功能已升级JavaScript API GL，地址解析功能可直接调取接口使用，欢迎大家体验！
地址解析（地址转坐标）
JavaScript API GL参考手册
作者：houqq
链接：/a/1190000022211912
来源：segmentfault
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
