How does vue integrate Baidu Map to display designated location Information

This article mainly explains "vue how to integrate Baidu map to display designated location information", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "vue how to integrate Baidu map to display designated location information"!

Take a look at the effect picture first.

1. Install related dependencies npm I-save vue-baidu-map 2, quote import BaiduMap from "vue-baidu-map" Vue.use in main.js (BaiduMap, {ak: 'your key (Baidu Map is open to API official website for free application) 3. Create map tool map.jsexport function MP (ak) {return new Promise (function (resolve) Reject) {window.init = function () {resolve (BMap)} var script = document.createElement ("script") Script.type = "text/javascript"; script.src = "http://api.map.baidu.com/api?v=2.0&ak="+" your key" + "& callback=init"; script.onerror = reject; document.head.appendChild (script);})}

Introduce the tool in files that need to use maps

Import {MP} from "@ / utils/map.js"; IV. Mapping

1. Create a container display map, assign an id to the container, and specify the width and height of the container according to the specific needs of the page.

2. Define the data to be used in data

Data () {return {dialogMap: false, mapPointName: ", mapGetshow: true}}

3. Define global map map objects and geocoder geocoding objects.

Var map;let geoc = null

4. Create a method to locate the location and add the name of the location to be displayed. You can also dynamically specify it here.

MapNameChange () {let that = this, point, marker = null; let local = new BMap.LocalSearch (map, {renderOptions: {map: map}, onSearchComplete: (res) = > {if (local.getResults ()! = undefined) {map.clearOverlays () / / clear all overlays on the map if (local.getResults (). GetPoi (0)) {point = local.getResults () .getPoi (0) .point; / / get the results of the first intelligent search map.centerAndZoom (point, 10); marker = new BMap.Marker (point); / / create tag map.addOverlay (marker) / / add annotations to the map marker.enableDragging (); / / draggable geoc.getLocation (point, function (rs) {var addComp = rs.addressComponents) That.mapPointName = addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber });} else {console.log ("results not found")}} else {alert ("results not found");},}); local.search ("Yueyang Tower"); / / location to be displayed}

5. Call the above method in the mounted function and draw the map

Mounted () {this.$nextTick (function () {var _ this = this; MP (_ this.ak). Then ((BMap) = > {let that = this; this.dialogMap =! this.dialogMap; if (that.mapGetshow) {map = new BMap.Map ("container"); / / id geoc = new BMap.Geocoder (); map.enableScrollWheelZoom () } _ this.mapNameChange () / / call the location method});}) } Thank you for your reading. the above is the content of "how vue integrates Baidu Map to display designated location information". After the study of this article, I believe you have a deeper understanding of how vue integrates Baidu Map to display designated location information, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!