百度地图引入js-sdk的做拖拽地图的时候，获取拖拽结束后的经纬度,有自己的监听，而在做高德地图sdk接入的时候，使用拖拽的时候要引入一个ui的 PositionPicker库，首先在vue工程的public目录下引入js跟ui库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 百度地图定位 -->
<script type="text/javascript" id="baiduMapAddress"
src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=WZp3MbqSXW5YUgDSYIMaqLQHd0tKZeKq"></script>
<!-- 高德地图定位sdk -->
<script type="text/javascript" src="//webapi.amap.com/maps?v=1.4.3&key=你公司的key&&plugin=AMap.Driving"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<title>
<%= webpackConfig.name %>
</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it
to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
接下来引入如下代码：
//初始化高德定位
initGdData() {
const that = this;
const stationHighSeasPool = that.$store.state.stationHighSeasPool;
const { outItem } = stationHighSeasPool;
const { base, cityName, provinceName, townName } = outItem;
const { longitude, latitude } = base;
//第一步 拿到 上个页面点击的经纬度 跟城市之类的
that.point = [longitude, latitude];
AMapUI.loadUI(
["misc/PositionPicker", "misc/PoiPicker"],
function (PositionPicker) {
const mapObj = new AMap.Map("content-row-map", {
resizeEnable: true,
center: that.point,
zooms: [4, 18], //设置地图级别范围
zoom: 13,
});
const center = mapObj.getCenter();
console.log("获取地图中心", center);
mapObj.plugin(
["AMap.Geolocation", "AMap.Weather", "AMap.Scale", "AMap.ToolBar"],
function () {
//定位实例
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位，默认:true
timeout: 10000, // 超过10秒后停止定位，默认：无穷大
maximumAge: 0, // 定位结果缓存0毫秒，默认：0
convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
showButton: true, // 显示定位按钮，默认：true
buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
});
const weather = new AMap.Weather();
//执行实时天气信息查询
weather.getLive("深圳市", function (err, data) {
console.log(err, data);
});
mapObj.addControl(weather);
mapObj.addControl(new AMap.Scale()); // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
mapObj.addControl(new AMap.ToolBar()); // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
mapObj.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, "complete", that.onComplete); // 返回定位信息
AMap.event.addListener(geolocation, "error", that.onError); // 返回定位出错信息
}
);
const positionPicker = new PositionPicker({
//默认拖拽地图
mode: "dragMap",
map: mapObj,
});
console.log("拖拽对象", positionPicker);
positionPicker.on("success", function (positionResult) {
console.log("拖拽结果", positionResult);
});
positionPicker.on("fail", function (positionResult) {
console.log("拖拽失败", positionResult);
});
positionPicker.start();
}
);
},
onComplete(val) {
console.log("complete_val", val);
},
onError(val) {
console.log("error_val", val);
},
网友评论