google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码

您所在的位置：网站首页 › 谷歌地图取消位置标记 › google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码

google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码

2023-07-15 01:32| 来源: 网络整理| 查看: 265

前提

首先要去google地图申请一个api_key，教程参考:https://blog.csdn.net/Ariel_201311/article/details/94441085 然后要多看文档google地图api

正文

引入谷歌地图

//vue的话在根目录的index.html引入即可 center: new google.maps.LatLng(39.915168, 116.403875), //地图的中心点 zoom: 10, //地图缩放比例 mapTypeId: google.maps.MapTypeId.ROADMAP, //指定地图展示类型：卫星图像、普通道路 mapTypeControl: false,//是否显示地图类型组件,false则不显示 fullscreenControl: false, //是否显示全屏按钮,false则不显示 scrollwheel: true, //是否允许滚轮滑动进行缩放 }); // 监听地图的点击事件 datas.map.addListener('click', (e) => { /* e.latLng 获取经纬度对象 * e.latLng.lat(), e.latLng.lng()获取经度和纬度 */ //可以进行增加marker，获取地址等操作 }); }

增加marker

/*这样做每次点击都会生成一个新的marker点，如果只需要一个marker则只在初始化的时候生成一个marker，然后通过marker.setPosition({lat：23.5645,lng:116.403875})来改变marker位置*/ //positon是经纬度对象 function addMarker(position) => { //将地图移动到点击的位置,map是创建地图的变量 map.panTo(position); //添加标记点 const marker = new google.maps.Marker({ position,//经纬度 map,//创建的地图变量 animation: google.maps.Animation.DROP, //marker出现的动画,还有一种是google.maps.Animation.BOUNCE，效果一直跳，通过调用marker.setAnimation(null)才会停止。 }); //将每一个marker加近数组是为了等下可以做清空操作，这里如果是vue的话不能用data创建响应式变量,否则清空不了 const markers = []; markers.push(marker); // 通过监听点击事件打开显示信息窗口 marker.addListener("click", () => { //生成信息弹窗 new google.maps.InfoWindow({ content:'哈哈哈哈哈', }).open(map, marker); //map,marker都是你创建的地图和标记点变量 }) }

清空marker

// 清空所有标记 function deleteMarker(){ for (let i = 0; i new google.maps.Geocoder().geocode({ 'latLng': position //传入经纬度 }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { // 判断是否能详细到街道，不能则只显示到区 if (results[0].formatted_address.indexOf('Unnamed Road') == -1) { var address = results[0].formatted_address + ""; } else { var address = results[1].formatted_address + ""; } address += "纬度：" + position.lat() + ""; address += "经度：" + position.lng(); } else { alert("Geocoder failed due to: " + status); } }); }

【本文地址】

google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码

google地图开发(1)，增删创建地图、marker标记、信息弹窗、反向地理编码

今日新闻

推荐新闻