vue 使用高德地图标记坐标，去除高德水印logo
第一步：找到项目里的index.html引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的高德key">
同样的文件里面添加下面的css,去掉高德水印
<style type="text/css">
.amap-logo {
display: none;
opacity: 0 !important;
}
.amap-copyright {
opacity: 0;
}
</style>
第二步：main.js
import VueAMap from \'vue-amap\';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: \'高德key\',
plugin: [\'AMap.Autocomplete\', \'AMap.PlaceSearch\', \'AMap.Scale\', \'AMap.OverView\', \'AMap.ToolBar\', \'AMap.MapType\', \'AMap.PolyEditor\', \'AMap.CircleEditor\'],
v: \'1.4.4\'
});
第三步：在要使用的页面
<div class="map" id="map-location" ref="basicMapbox"></div>
<script>
var map, marker;
export default {
data() {
return {
arriveCoor: [\'经度\', \'纬度\'], //坐标点
arrive: "", //位置信息
mapData: [],
},
},
created() {
var that = this;
that.getmap();
that.getshop();
},
mounted() {
this.mapDraw(this.arriveCoor);
this.mapCoor(this.arriveCoor);
},
methods: {
mapDraw(arriveCoor) {
map = new AMap.Map(\'map-location\', { //map-location是嵌地图div的id
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 16, //初始化地图层级
center: arriveCoor, //初始化地图中心点
});
this.addMarker(arriveCoor); // 定位点
},
// 实例化点标记
addMarker(arriveCoor) {
var _this = this;
marker = new AMap.Marker({
icon: new AMap.Icon({
image: "../../../static/images/locationpng.png",
size: new AMap.Size(64, 64), //图标大小
imageSize: new AMap.Size(32, 32)
}),
position: arriveCoor,
offset: new AMap.Pixel(-13, -30),
draggable: true, // 设置是否可以拖拽
cursor: \'move\',
raiseOnDrag: true // 设置拖拽效果
})
marker.setMap(map);
},
mapCoor(lnglatXY) {
var _this = this;
AMap.service(\'AMap.Geocoder\', function() { //回调函数
var geocoder = new AMap.Geocoder({});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === \'complete\' && result.info === \'OK\') {
//获得了有效的地址信息:
_this.arrive = result.regeocode.formattedAddress;
} else {
_this.arrive = "暂无位置";
}
});
})
},
},
}
</script>
以上是 vue 使用高德地图标记坐标，去除高德水印logo 的全部内容， 来源链接： utcz.com/z/378299.html
