Vue开发腾讯地图坐标拾取器

以前用Jquery开发过一个腾讯地图坐标拾取器，项目需要重新改成Vue版本,效果如下

大概功能描述：可以按城市及地址模糊查找位置信息，左边是查询结果，右边是地图显示，地图可以点击直接取坐标和地址信息

1、首先去申请一个key，可以在https://lbs.qq.com/这个网站里申请，需要创建一个应用并开通WebServiceAPI

2、在vue中引用腾讯地图，在Index.html文件引入
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=您申请的Key"></script>

3.开发坐标拾取组件

export default {name: "TMap",data() {return {visible: true,loading: true,map: null,mapKey: "您申请的地图Key",mapLevel: 14,mapLabel: null,mapCity: "",mapAddress: "",mapLatLng: null,searchForm: {key: "",},addressList: [],markerList: [],markerEventList: [],areaJson: [],};},props: {mapPosition: {type: Array,},address: {type: String,},},created() {this.mapLatLng = this.mapPosition;this.mapAddress = this.address;this.areaJson = areaJson.areas;this.$nextTick(function () {this.initMap();});},mounted() {},methods: {initMap() {let me = this;//初始化地图let mapContainer = document.getElementById("mapContainer");console.log(mapContainer);this.map = new window.qq.maps.Map(mapContainer, {zoom: me.mapLevel,});//设置Zoomwindow.qq.maps.event.addListener(this.map, "zoom_changed", function () {me.mapLevel = me.map.getZoom();});//创建Labelthis.mapLabel = new window.qq.maps.Label({map: this.map,offset: new window.qq.maps.Size(15, -12),draggable: false,clickable: false,});this.map.setOptions({draggableCursor: "crosshair",});mapContainer.addEventListener("mouseenter", function (e) {me.mapLabel.setMap(me.map);});mapContainer.addEventListener("mouseleave", function (e) {me.mapLabel.setMap(null);});window.qq.maps.event.addListener(this.map, "mousemove", function (e) {var latlng = e.latLng;me.mapLabel.setPosition(latlng);me.mapLabel.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6));});if (this.mapLatLng != null) {this.locationService();} else {this.initcityService();}//点击获取地址window.qq.maps.event.addListener(this.map, "click", function (e) {me.$jsonp("http://apis.map.qq.com/ws/geocoder/v1/?location=" +e.latLng.getLat() +"," +e.latLng.getLng() +"&key=" +me.mapKey +"&output=jsonp&callback=?").then((res) => {console.log(res);if (res.status == 0) {me.mapAddress = res.result != undefined ? res.result.address : "";me.mapLatLng =res.result != undefined? [res.result.location.lat, res.result.location.lng]: null;}});});},initcityService() {let me = this;//当位定前位置let cityService = new window.qq.maps.CityService({complete: function (result) {console.log(result);me.map.setCenter(result.detail.latLng);me.mapCity = result.detail.name;},});cityService.searchLocalCity();},//按坐标获取位置信息locationService() {let me = this;this.$jsonp("http://apis.map.qq.com/ws/geocoder/v1/?location=" +this.mapLatLng[0] +"," +this.mapLatLng[1] +"&key=" +this.mapKey +"&output=jsonp&callback=?").then((res) => {if (res.status == 0 && res.result) {let center = new window.qq.maps.LatLng(this.mapLatLng[0],this.mapLatLng[1]);this.map.panTo(center);let marker = new window.qq.maps.Marker({position: center,map: this.map,});me.mapAddress = res.result.address;me.mapCity = res.result.address_component.city;}});},//查询地址信息handleSearch() {if (!util.isNullEmpty(this.searchForm.key)) {this.$jsonp("http://apis.map.qq.com/ws/place/v1/search?keyword=" +this.searchForm.key +"&boundary=region(" +this.mapCity +",0)&page_size=9&page_index=1&key=" +this.mapKey +"&output=jsonp&&callback=?").then((res) => {console.log(res);if (res.status == 0) {res.data.map((item, index) => {item.id = "mapItem" + index;item.active = false;item.hover = false;return item;});this.addressList = res.data;this.setMarker(res);this.map.setZoom(14);}});} else {this.addressList = [];this.$jsonp("http://apis.map.qq.com/ws/geocoder/v1/?region=" +this.mapCity +"&address=" +this.mapCity +"&key=" +this.mapKey +"&output=jsonp&&callback=?").then((res) => {if (res.status == 0) {this.map.setCenter(new window.qq.maps.LatLng(res.result.location.lat,res.result.location.lng));this.map.setZoom(14);}});}},//设置MarkersetMarker(res) {let me = this;let latlngBounds = new window.qq.maps.LatLngBounds();//删除Markerthis.markerList.forEach((item) => {item.setMap(null);});//删除Marker事件this.markerEventList.forEach((item) => {window.qq.maps.event.removeListener(item);});this.markerEventList = [];this.markerList = [];res.data.forEach((item, index) => {let latlng = new window.qq.maps.LatLng(item.location.lat,item.location.lng);latlngBounds.extend(latlng);//创建Markerlet marker = new window.qq.maps.Marker({map: this.map,position: latlng,zIndex: 10,});marker.index = index;marker.isClicked = false;this.setAnchor(marker, false);this.markerList.push(marker);//点击事件this.markerEventList.push(window.qq.maps.event.addDomListener(marker, "click", function () {me.setFlagClicked(this.index);}));this.markerEventList.push(window.qq.maps.event.addDomListener(marker, "mouseover", function () {me.setCurrentMarker(this.index, true);me.hoverAddress(this.index, true);me.mapLabel.setContent(this.position.getLat().toFixed(6) +"," +this.position.getLng().toFixed(6));me.mapLabel.setPosition(this.position);me.mapLabel.setOptions({offset: new window.qq.maps.Size(15, -20),});document.getElementById("mapItem" + this.index).scrollIntoView({ behavior: "smooth" });}));this.markerEventList.push(window.qq.maps.event.addDomListener(marker, "mouseout", function () {me.setCurrentMarker(this.index, false);me.hoverAddress(this.index, false);me.mapLabel.setOptions({offset: new window.qq.maps.Size(15, -12),});}));this.map.fitBounds(latlngBounds);});if (this.markerList.length > 0) {this.map.setCenter(this.markerList[0].position);}},setAnchor(marker, flag) {let left = marker.index * 27;let anchor = new window.qq.maps.Point(10, 30),origin = new window.qq.maps.Point(left, flag ? 35 : 0),size = new window.qq.maps.Size(27, 33),icon = new window.qq.maps.MarkerImage("/images/marker10.png",size,origin,anchor);marker.setIcon(icon);},//选择地址selectAddress(index) {this.setCurrentAddress(index);this.setFlagClicked(index);this.map.setCenter(this.markerList[index].position);},hoverAddress(mapIndex, flag) {this.addressList.map((item, index) => {item.hover = flag ? index == mapIndex : flag;return item;});},setCurrentAddress(mapIndex) {this.addressList.map((item, index) => {item.active = index == mapIndex;return item;});},setCurrentMarker(index, flag) {if (flag || (!flag && !this.markerList[index].isClicked)) {this.setAnchor(this.markerList[index], flag);}},setFlagClicked(mapIndex) {this.markerList.map((item, index) => {if (index == mapIndex) {item.isClicked = true;item.setZIndex(10);this.setAnchor(item, true);this.mapLatLng = [item.getPosition().getLat().toFixed(6),item.getPosition().getLng().toFixed(6),];this.mapAddress = this.addressList[mapIndex].address;} else {item.isClicked = false;item.setZIndex(9);this.setAnchor(item, false);}return item;});this.setCurrentAddress(mapIndex);document.getElementById("mapItem" + mapIndex).scrollIntoView({ behavior: "smooth" });},handleSubmit() {if (this.mapLatLng == null) {this.$message({message: "请定位坐标",type: "error",offset: 60,});return;}this.$emit("setMap", { position: this.mapLatLng,address:this.mapAddress });},//关闭closeMapWin() {this.$emit("closeMapWin", {});},},
};

4.该例子有用到ElementUI和jsonp

效果Demo可以访问http://demo.h5qr.cn/map

完整代码库https://github.com/xi-star/vuemap

Vue开发腾讯地图坐标拾取器相关推荐

腾讯地图坐标拾取器，js转WGS84保存到后台
效果如上: 有个项目需要大量的地图坐标(wgs84),想到了用地图点击保存的方式来实现,html+js就可以搞定. 首先要申请一个腾讯地图的key 剩下的就是看文档,写js,写页面了. <!DO ...
地图坐标拾取/查询经纬度
前言略天安门(BD-09坐标系) 经度:116.403838 纬度:39.915077 石家庄人民广场(GCJ-02坐标系) 经度:114.514746 纬度:38.043622 工具经纬度查询 ...
日常生活小技巧 -- 百度地图坐标拾取
链接:百度坐标拾取系统打开百度地图->>地图开放平台->>开发->>坐标拾取器需要注意的是,百度地图新旧版本地图开发平台选项的位置不同. 新版本在底部: 旧 ...
微信公众平台开发——腾讯地图导航
一.获取目的地的经纬度先通过腾讯坐标拾取器,来获取目的地的坐标. 二.腾讯地图的公交.驾车.步行导航调用示例 http://apis.map.qq.com/uri/v1/routeplan?typ ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...
百度地图坐标转成腾讯地图坐标
后台坐标是百度地图标记的,小程序是腾讯地图,客户发现一个楼盘在河里,觉得很奇怪,再看看其他的楼盘,位置都不对,之后才发现百度自成体系. 百度地图与腾讯地图坐标转换_James-CSDN博客转换结果会有 ...
vue h5 腾讯地图路线规划
vue h5腾讯地图定位传送门代码如下:在微信浏览器中会弹出是否打开第三方点击取消则打开内置腾讯点击去则跳转腾讯地图app location.href = https://apis.map.q ...
高德地图、百度地图、腾讯地图坐标相互转换
高德地图.百度地图.腾讯地图坐标相互转换 1.WGS-84原始坐标系,一般用国际GPS纪录仪记录下来的经纬度,通过GPS定位拿到的原始经纬度,Google和高德地图定位的的经纬度(国外)都是基于WGS ...
vue 调用腾讯地图 https://apis.map.qq.com/ws/place/v1/suggestion/
vue 调用腾讯地图 1.先安装依赖 npm install jsonp 2. 新建一个jsonp.js 文件 3. 以下代码放到jsonp.js文件里 exports.install = funct ...

Vue开发腾讯地图坐标拾取器

Vue开发腾讯地图坐标拾取器相关推荐

最新文章

热门文章