vue使用高德地图显示坐标

index.html引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=847384cfd259b9042e88e96e851ae791"></script>

vue main.js引入

import AMap from 'vue-amap'; // 高德
//地图key
AMap.initAMapApiLoader({key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',//密钥plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType','AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],v: '1.4.15'
});
Vue.use(AMap);

<template><div id="mapDiv"></div>
</template>
<script>
export default {data () {return {map: null};},created () { },mounted () {this.drawMap();},destroyed () {if (this.map != null) {this.map.destroy();}},methods: {drawMap () {AMap.plugin('AMap.PlaceSearch', () => {var placeSearch = new AMap.PlaceSearch(); //构造地点查询类placeSearch.search('地址', (status, result) => {if (result.info === 'OK') {var lat = result.poiList.pois[0].location.Q;var lng = result.poiList.pois[0].location.R;this.map = new AMap.Map('mapDiv', {resizeEnable: true,center: [lng, lat], //地图中心点zoom: 20 //地图显示的缩放级别});// 创建一个 Marker 实例：var marker = new AMap.Marker({position: new AMap.LngLat(lng, lat),   // 经纬度对象title: '北京',icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png'});// 将创建的点标记添加到已有的地图实例：this.map.add(marker);}}); //关键字查询查询});}}
}
</script>

vue使用高德地图显示坐标相关推荐

vue 使用高德地图标记坐标，去除高德水印logo
第一步:找到项目里的index.html引入 <script type="text/javascript" src="https://webapi.amap.com ...
Android 外部调起高德地图显示坐标点自定义标注高德地图 by Terry
下载链接: 点击下载demo 在App开发中,经常想在高德地图上标注我们想要的坐标点.其实这个动作很简单,但是,高德地图API开发文档把这一块藏得太隐蔽了.不太好找. 就几行代码. Intent i ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue 使用高德地图（vue-amap）记录
vue 使用高德地图 (vue-amap)记录效果图第一步下载vue-amap依赖: npm install vue-amap --save 高德地图ui:https://lbs.amap.co ...
vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
gps wgs84坐标与高德gcj02坐标互转
vue中 wgs84坐标转为高德gcj02坐标,详见高德官方文档:其他坐标转高德坐标-坐标变换-教程-地图 JS API | 高德地图API //设置gps wgs84坐标转为高德gcj02conve ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述:初始状态下,可以看到所有数据在地图上的分布的省份及相应的分布数量,点击点标注可以弹出对应的详细信息. 该例子使用了高德地图原生API去实现上述功能,效果图如下: 下面附上实现步骤: 1. v ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...

vue使用高德地图显示坐标

vue使用高德地图显示坐标相关推荐

最新文章

热门文章