谷歌地图的使用，包括坐标点的刷新，设置中心点

之前官网重构，有用到谷歌地图的使用，以及切换坐标点时，图标的切换。
1、首先创建谷歌地图，并申明一个中心点，以及缩放比例。

var myOptions = {zoom: 17,center: new google.maps.LatLng(clat, clng), // 设置当前柜子为中心mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl: false
};
//添加map
gmap = new google.maps.Map(document.getElementById("googleMap"), myOptions);

2、取数据，并标点，并给每个标点添加点击事件：

let markers = [];
for(var i = 0; i < Mapdata.length; i++) {var gmarker = new google.maps.Marker({position: new google.maps.LatLng(Mapdata[i].latitude, Mapdata[i].longitude),map: gmap,// 下面是匹配中心点图标及一般坐标的图标icon: (clng == Mapdata[i].longitude && clat == Mapdata[i].latitude) ? "" : 'img/myPic.png',siteId: Mapdata[i].siteId,_lng: Mapdata[i].longitude,_lat: Mapdata[i].latitude,});markers.push(gmarker);
}// 添加点击事件
for(let j = 0; j < markers.length; j++) {markers[j].addListener('click', function() {// 点击图标，跳转到对应的详情location.href = "detail.html?id=" + markers[j].siteId + "&lng=" + markers[j]._lng + "&lat=" + markers[j]._lat;});
}

下面是首页示意图，下面的图标采用的自定义的图标

3、点击首页标点，进入详情页，把ID传过去，
其中一个是重新定位最新的中心点，并zoom到适当的比例，并把选中的中心点标为谷歌默认的红色；下面是详情展示

4、详情页面点的切换，地图不刷新，地图标点重新渲染

for(let j = 0; j < markers.length; j++) {markers[j].addListener('click', function() {event.preventDefault();event.stopPropagation();// 点击图标，获取到对应的详情getDetail(markers[j].siteId);gmap.setCenter(new google.maps.LatLng(markers[j]._lat,markers[j]._lng));  // 设立新的中心点        // 设立当前点中的为红标，其他的为默认黑标        markers.forEach(function(ee, ii){if (ee._lng !== markers[j]._lng && ee._lat !== markers[j]._lat) {ee.setIcon("img/location/myPic.png"); //非选中的图标} else {ee.setIcon("");  // 选中的图标（红色）}})});}

所以总结就是：
一、设立新的中心点：gmap.setCenter(latitude, longitude);
二、重新渲染选中的图标：ee.setIcon(“img/myPic.png”); //非选中的图标

谷歌地图的使用，包括坐标点的刷新，设置中心点相关推荐

经纬度计算距离html,js版谷歌地图计算两经纬度坐标点的距离
球面上两点间大圆劣弧的距离html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
java版谷歌地图计算两经纬度坐标点的距离
球面上两点间大圆劣弧的距离 public class GoogleMapHelper {private static double EARTH_RADIUS = 6378.137; //地球半径//将 ...
UE4大数据可视化教程(2)——通过谷歌地图创建任意一片3D地形
目录用blender和谷歌地图创建3D地形模型网站推荐用blender和谷歌地图创建3D地形注意下面操作需要全局翻墙,不能仅仅是浏览器翻墙,也就是软件也能访问谷歌地图之前我们装过blende ...
雅虎地图与谷歌地图坐标_打开Yahoo! 将与Google玩得很好，不竞争
雅虎地图与谷歌地图坐标 Much has been made today about Yahoo!'s Open Strategy, which Yahoo! describes as a way t ...
雅虎地图与谷歌地图坐标_雅虎！ BOSS：现在对Google确实有好处
雅虎地图与谷歌地图坐标 Yahoo! today pushed out a major update to its Build Your Own Search Service (BOSS). Whil ...
雅虎地图与谷歌地图坐标_为什么Google会击败Yahoo! 在网络托管大战中
雅虎地图与谷歌地图坐标 The mighty (and now public) juggernaut that is Google is emerging as the most formidable ...
iOS 国外地图开发谷歌地图坐标放到苹果地图上坐标不准确
首先请允许我发一个牢骚.苹果地图这个坑... 一 .我们要开发一个国外定点展示房屋信息的地图应用.效果图如下: . 二.第一反应用苹果原生地图Mapkit做.我们的坐标点都是从谷歌地图上取出来的. 功 ...
Google Map开发系列（六）——谷歌地图坐标定位
要在地图中定位一个点,最常见的就是使用一个地理坐标来定位.但是,谷歌地图 API 还提供了不同于地理坐标的多套坐标系统,方便我们在需要的时候使用不同的坐标来定位在地图上显示的信息.我在右边的地图中演示 ...
关于谷歌地图坐标与百度地图坐标的事
2019独角兽企业重金招聘Python工程师标准>>> 解决方案 haotsp.com 有演示示例众所周知地球是一个不规则椭圆体,GIS中的坐标系定义由基准面和地图投影两组参数确定 ...

谷歌地图的使用，包括坐标点的刷新，设置中心点

谷歌地图的使用，包括坐标点的刷新，设置中心点相关推荐

最新文章

热门文章