腾讯地图地址搜索marker标记demo

前言

微信小程序项目需要实现输入地址搜索解析出相应经纬度并在地图上打点标注。

前期准备

1、申请腾讯位置服务key

2、npm install qqmap --save

引入需要的js文件

在App.vue中输入

<script type="text/javascript" src="http://map.qq.com/api/js?v=2.exp&key=申请的key"></script>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

新建TMap.js文件

import maps from 'qqmap';export function TMap() {return new Promise(resolve => {maps.init(申请的key, () => {resolve(maps);});});
}

新建map.vue文件

<template><div id="container"></div>
</template>
<script>
/* eslint-disable */
import { TMap } from "./TMap"; export default {name: "mapChild",data() {return {};},created() {let _this = this;TMap().then(qq => {//初始化中心点，传入想要设置的值this.mapInit(经度, 纬度, 缩放比例);});},methods: {//父组件调用该函数，设置地点setLoc(lng, lat) {this.mapInit(lng, lat, 16);},//搜索某一地点名getLoc(ele) {this.$axios({url: url, //直接使用腾讯的搜索api的话会报跨域错误//我是通过node服务端作为代理去请求数据//所以这里就不放出实际ip地址了哈//在最后我会将node部分的代码也加上method: "get",params: {address: ele}}).then(res => {let searchObj = res.data.data;searchObj.search = 1;this.$emit("mapSend", searchObj);let _this = this;let resultData = res.data.data.data[0];if (res.data.data.status == 0) {this.mapInit(resultData.location.lng, resultData.location.lat, 16);}}).catch(error => {console.log(error);});},//根据传入的值渲染地图及传出经纬度和地名mapInit(lng,lat,zoom) {let _this = thisvar map = new qq.maps.Map(document.getElementById("container"), {// 地图的中心地理坐标。center: new qq.maps.LatLng(lat,lng),zoom: zoom});var marker = new qq.maps.Marker({position: new qq.maps.LatLng(lat,lng),map: map});qq.maps.event.addListener(map, "click", function(event) {marker.setMap(null);});qq.maps.event.addListener(map, "click", function(event) {let result = {status: 0,result: {location: {lng: event.latLng.getLng(),lat: event.latLng.getLat()}}};qq.maps.event.addListener(map, "click", function(event) {marker.setMap(null);});var marker = new qq.maps.Marker({position: event.latLng,map: map});_this.$axios({url: url,//这里的url跟上面也是相同的问题method: "get",params: {location: event.latLng.getLat() + "," + event.latLng.getLng()}}).then(res => {res.data.data.extra = 1;_this.$emit("mapSend", res.data.data);}).catch(err => {this.$message({type: 'warning',message: '定位解析失败'})})});}},
};
</script>
<style>
#container {min-width: 600px;min-height: 400px;
}
</style>

以上就完成了子组件的创建，然后就可以在父组件中引入并使用

效果图

node部分代码

//获取地点
router.get('/tmapA', async function (req, res, next) {let url = 'http://apis.map.qq.com/ws/place/v1/suggestion/?key=申请的key&region=' + urlencode('绍兴','utf-8') + '&keyword=' + urlencode(req.query.address,'utf-8') request({url: url,method: "GET",json: true,}, function(_err, _res, _resBody){        if(_resBody){new Result(_resBody, '解析成功').success(res)}else{new Result(null, '解析失败').fail(res)}})
})

//获取经纬度
router.get('/tmapL', async function (req, res, next) {let url = 'https://apis.map.qq.com/ws/geocoder/v1/?key=申请的key&location=' + req.query.locationrequest({url: url,method: "GET",json: true,}, function(_err, _res, _resBody){        if(_resBody){new Result(_resBody, '解析成功').success(res)}else{new Result(null, '解析失败').fail(res)}})
})

作者：yiyou12138

链接：https://segmentfault.com/a/1190000022763174

来源：SegmentFault

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

腾讯地图地址搜索marker标记demo相关推荐

腾讯地图位置搜索，标记
功能中仅包括位置搜索和位置标记,并获取到标记位置的经纬度和名称. 在当前倍数点击无地点名称的位置时不会标记和获取信息. 地图渲染时可传入坐标位置来定位初始坐标点. 大概就这样吧先上图片,展示效果首 ...
uni-app 小程序使用腾讯地图完成搜索功能
前言使用uni-app开发小程序时候使用腾讯地图原生SDK是,要把原生写法转成vue写法在这记录一下. 我们需要注意的是使用高德地图时我们不仅要引入SDK,还要再uni-app中配置允许使用. 由于 ...
html地图添加marker,腾讯地图添加多marker标注样式
腾讯地图添加多marker样式 html, body { height: 100%; margin: 0px; padding: 0px; } #container { 800px; height: ...
Vue引入腾讯地图（搜索获取定位）
效果: 申请腾讯地图 1.首先进入腾讯位置服务登陆/注册,地址:https://lbs.qq.com/ 2.进入控制台,点击左侧菜单应用管理-我的应用,点击右上方创建应用,填写内容如下 WebServ ...
微信小程序map 地图引入配置+腾讯地图地址坐标解析
最终效果一.要实现的功能展示地图. 参考map组件在地图上展示多个店铺. marker标记点用于在地图上显示标记的位置. 点击店铺放大图标,展示选择的店铺信息. 更改选择店铺的标记尺寸大小. 在 ...
腾讯地图js api多标记点点击事件
做了项目需要使用腾讯地图的jsapi,但是在做到多标记时发现,官方的文档只写了单个标记点击事件,如果是多个标记按官方文档的方法则会一直只显示最后一个官方文档: info.setPosition(ma ...
高德地图/腾讯地图地址转换经纬度
/*** 高德地图通过地址获取经纬度*/public static String GaodeLocation(String address) {String geturl = "http:/ ...
ios百度地图地址搜索功能-在线建议查询
最近使用到了百度地图,总结一下,话不多说直接上代码: 使用的是searchBar+在线建议查询一.准备工作导入头文件#import <BaiduMapAPI_Search/BMKSearch ...
GIS（一）——在js版搜索地图上添加Marker标记
由于我们做的是有关于旅游方面的项目,所以涉及到了地图功能.我接到的其中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记. 我们项目用的是搜狗地图,使用的是js版本.大家有兴趣的话,可以参考 ...

腾讯地图地址搜索marker标记demo

前言

前期准备

引入需要的js文件

新建TMap.js文件

新建map.vue文件

效果图

node部分代码

腾讯地图地址搜索marker标记demo相关推荐

最新文章

热门文章