vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记

先看效果：

首先记得引入高德地图，并且要带上&plugin=AMap.DistrictSearch，如下：

这是data：

data(){return{map:{},markers:[],tableData3:[{cityName: "上海市"},{cityName: "信阳市"},{cityName: "郑州市"}]}
}

methods:

drawMap() {const that = this// 普通点var normalMarker = new AMap.Marker({offset: new AMap.Pixel(0, -40),});  var icon = new AMap.Icon({image: require('../../../../assets/images/map/red-circle.png'),//本地引入图标size: new AMap.Size(34, 34), imageSize: new AMap.Size(34, 34),});var opts = {subdistrict: 0,   //获取边界不需要返回下级行政区extensions: 'all',  //返回行政区边界坐标组等具体信息level: 'city'  //查询行政级别为 市};var district = null//加载行政区划插件if(!district){//实例化DistrictSearchdistrict = new AMap.DistrictSearch(opts);}let ccenter  //这里是把地图默认中心位置选在第一个城市的中心点，如果没这个需要可以删除这一段district.search(that.tableData3[0].cityName, function(status, result) {ccenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]that.map = new AMap.Map('mapContainerbb', {mark:{},mapStyle: 'amap://styles/darkblue',center: ccenter,zooms: [4,8],//设置地图级别范围zoom: 13});})//行政区查询let cityCenter = ''that.tableData3.forEach((item,index)=>{district.search(item.cityName, function(status, result) {cityCenter = [result.districtList[0].center.lng,result.districtList[0].center.lat]that.markers[index] = new AMap.Marker({icon: icon,position: cityCenter,offset: new AMap.Pixel(-12,-12),zIndex: 101,map: that.map,anchor: 'top-right'});})})     },

vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记相关推荐

vue项目中高德地图的注册及使用
1.创建应用点击进入高德地图个人开发的注册:https://lbs.amap.com/dev/id/personal 然后可以登录支付宝进行认证. 注册完毕之后,点击右上角的控制台点击右上角的创建 ...
vue项目中高德地图总是出不来的问题
创建地图是个很简单的API,但是地图时不时的出不来,这个问题就严重了,一时真查不出原因. 经过无数的测试,发现地图需要规矩化问题 vue是单页面应用,两个id一样的map,会出现出不来的问题具体为 ...
vue项目使用高德地图
vue项目使用高德地图-部分功能介绍在此做个笔记,引入方式使用了高德2.0 loadsh的加载方式 1.引入高德地图方式-NPM npm i @amap/amap-jsapi-loader --sa ...
vue项目使用高德地图定位当前地址
vue项目使用高德地图定位当前地址一.在项目中安装vue-amap插件二.页面代码三.data数据一.在项目中安装vue-amap插件 1.最终效果 2.安装命令 npm install vu ...
Vue项目中用高德地图实现定位
说明:本文主要是介绍如何在Vue项目中接入百度地图并定位当前城市,更深层次的内容稍后有空整理. 可能还有更牛的实现方案,目前我这里记录的是我自己跑通的一个版本,希望对你有所帮助,仅供参考. Vue项目 ...
出行助手Vue项目中高德API的使用
本文章是出行助手项目使用高德API的一些经验,见程序代码及注释, 详情请查看高德API 高德地图初始化加载定位到当前城市(具体位置): 设置一个div挂载高德地图:<div id="m ...
Vue项目引用百度地图并实现搜索定位等功能
Tip:本篇文章为案例分析,技术点较多,所以篇幅较长,认真阅览的你一定会学到很多知识. 前言:百度地图开放平台给开发者们提供了丰富的地图功能与服务,使我们的项目中可以轻松地实现地图定位.地址搜索.路 ...
vue项目接入高德地图点击地图获取经纬度及省市区
准备工作,可以先看官方的介绍,JSAPI结合Vue使用,这个不需要在main.js中引入 index.html中 //如果只需要获取经纬度可以跳过这步,经纬度逆解析为详细地址时需要配置这个 <s ...
VUE项目使用高德地图进行精准定位高德地图API
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.高德地图API 二.使用步骤 1.引入key 2.创建方法总结前言提示:以下是本篇文章正文内容,下面案例可供 ...

vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记

vue项目中高德地图根据城市名定位到城市中心位置，并在该位置做标记相关推荐

最新文章

热门文章