标签:ted center from resize ges his 新建 dev src
首先npm 引入
import AMapLoader from "@amap/amap-jsapi-loader";
在生命周期里加载实例
data(){ return { amap:{}, // 存放高德地图实例对象 mapObj: {}, // 存放当前绘画出的地图对象 } } mounted() { // 初始化地图 AMapLoader.load({ key: "", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 AMapUI: { // 是否加载 AMapUI,缺省不加载 version: "1.1", // AMapUI 缺省 1.1 plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件 }, // 引入api plugins: [ "AMap.Driving", // 驾车出行 "AMap.Geolocation", // 定位 "AMap.Autocomplete", // 输入提示插件 "AMap.PlaceSearch", // POI搜索插件 ], //插件列表 }).then((AMap) => { this.amap = AMap; this.initMap(); }); }, methods: { initMap() { let that = this; // 定位icon let locationIcon = { showButton: true, //是否显示定位按钮 buttonPosition: "RB", //定位按钮的位置 /* LT LB RT RB */ buttonOffset: new AMap.Pixel(10, 50), //定位按钮距离对应角落的距离 showMarker: true, //是否显示定位点 markerOptions: { //自定义定位点样式,同Marker的Options offset: new AMap.Pixel(-18, -36), content: ‘<img src="static/image/home/big-location.png" style="width:36px;height:36px"/>‘, }, showCircle: true, //是否显示定位精度圈 circleOptions: { //定位精度圈的样式 strokeColor: "#0093FF", noSelect: true, strokeOpacity: 0.5, strokeWeight: 1, fillColor: "#02B0FF", fillOpacity: 0.25, }, }; that.mapObj = new this.amap.Map("myMap", { // container为容器的id resizeEnable: true, zoom: 12, //初始化地图层级 }); // 实例化一个定位 let geolocation = new AMap.Geolocation(locationIcon); this.mapObj.addControl(geolocation); geolocation.getCurrentPosition(); // 成功后回调 AMap.event.addListener(geolocation, "complete", function (data) { if (data.info === "SUCCESS") { console.log(data) // 这里是定位成功后的输出数据 } }); // 失败回调 AMap.event.addListener(geolocation, "error", function (data) { alert("获取当前定位失败"); }); let drivingOption = { map: this.mapObj, policy: AMap.DrivingPolicy.LEAST_TIME, }; this.drivingObj = new AMap.Driving(drivingOption); //构造驾车导航类 }, }
开启定位生成如下图(注意如果到正式服,高德的定位需要配置https才能开启)
添加搜索功能
searchHandel(cityVal) { let that = this; let autoOptions = { citylimit: true, city: "440304", // 配置文档 https://developer.amap.com/api/javascript-api/reference/lnglat-to-address#m_AMap.Geocoder }; let auto = new AMap.Autocomplete(autoOptions); if (cityVal) { auto.search(cityVal, function (status, result) { if (status === "complete" && result.info === "OK") { console.log(‘这里是搜索成功的数据,这个数据可以放到搜索列表里‘, result) } }); } },
添加点击搜索列表事件
listSelect(item) { let that = this; // 新建icon function setIcon(l) { return new AMap.Icon({ size: new AMap.Size(25, 34), image: "static/image/home/dir-marker.png", // 这里是一些雪碧图icon imageSize: new AMap.Size(135, 40), imageOffset: new AMap.Pixel(l, -3), // 雪碧图偏移值 }); } // 将 icon 传入 marker let marker; function setMarker(data) { // current 0 为起始位置 1位终点 if (that.current == 0) { //添加marker marker = new AMap.Marker({ map: that.mapObj, icon: setIcon("-9"), position: data.location, }); that.startValue = item.name; } else { //添加marker marker = new AMap.Marker({ map: that.mapObj, icon: setIcon("-95"), position: data.location, }); that.endValue = item.name; } } that.position = item.location; setMarker(item); // 重新刷新地图定位 this.mapObj.setZoomAndCenter(12, item.location); },
完成效果如图
标签:ted center from resize ges his 新建 dev src
原文地址:https://www.cnblogs.com/hpx2020/p/14539284.html