Flask接口签名sign原理与实例代码浅析
251
2023-08-05
在Google 地图上实现做的标记相连接
这里仅仅是将谷歌地图API的使用方法告诉大家,算是抛砖引玉吧,由于某些原因,谷歌已经远离大家了。
复制代码 代码如下:
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
var map;
var poly;
function initialize() {
var myLatlng = new google.maps.LatLng(31.1937077, 121.4158436);
var locations = [
['test1, accuracy: 150m', 31.1937077, 121.4158436, 100],
['test2, accuracy: 150m', 31.2937077, 121.4158436, 100],
['test3, accuracy: 150m', 31.0937077, 121.2158436, 100],
['test4, accuracy: 150m', 31.3937077, 120.4158436, 100],
['test5, accuracy: 150m', 31.1637077, 120.4858436, 100],
['test6, accuracy: 150m', 31.1037077, 121.5158436, 100]
];
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// 线条设置
var polyOptions = {
strokeColor: '#00ff00', // 颜色
strokeOpacity: 1.0, // 透明度
strokeWeight: 4 // 宽度
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map); // 装载
/* 循环标出所有坐标 */
/*for(var i=0; i var loc = []; loc.push(locations[i][1]); loc.push(locations[i][2]); var path = poly.getPath(); //获取线条的坐标 path.push(new google.maps.LatLng(loc[0], loc[1])); //为线条添加标记坐标 //生成标记图标 marker = new google.maps.Marker({ position: new google.maps.LatLng(loc[0], loc[1]), map: map // icon: "https://maps.gstatic.com/mapfiles/markers/marker_green.png" }); }*/ var marker, i, circle; var iwarray = []; var infoWindow; var latlngbounds = new google.maps.LatLngBounds(); var iconYellow = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"); for (i = 0; i < locations.length; i++) { var loc = []; loc.push(locations[i][1]); loc.push(locations[i][2]); var path = poly.getPath(); //获取线条的坐标 path.push(new google.maps.LatLng(loc[0], loc[1])); var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]); latlngbounds.extend(latlng); if (locations[i][0].indexOf("[Cached") == 0 || (locations[i][0].indexOf("[Multiple") == 0 && locations[i][0].indexOf("[Cached") >= 0 )) { marker = new google.maps.Marker({ position: latlng, map: map, icon: iconYellow }); var iw = ' } else { marker = new google.maps.Marker({ position: latlng, map: map }); var iw = ' } iwarray[i] = iw; google.maps.event.addListener(marker, 'mouseover', (function(marker,i){ return function(){ infoWindow = new googleSFpVyqesb.maps.InfoWindow({ content: iwarray[i], maxWidth: 200, pixelOffset: new google.maps.SSFpVyqesbize(0, 0) }); infoWindow.open(map, marker); } })(marker,i)); google.maps.event.addListener(marker, 'mouseout', function() { infoWindow.close(); }); circle = new google.maps.Circle({ map: map, radius: locations[i][3], fillColor: '#0000AA', fillOpacity: 0.01, strokeWeight: 1, &http://nbsp; strokeColor: '#0000CC', strokeOpacity: 0.8 }); circle.bindTo('center', marker, 'position'); } map.fitBounds(latlngbounds); var listener = google.maps.event.addListenerOnce(map, "idle", function() { var zoomLevel = parseInt(map.getZoom()); if (zoomLevel > 13) map.setZoom(13); }); } google.maps.event.addDomListener(window, 'load', initialize);
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论' + locations[i][0] + '';
' + locations[i][0] + '
';
暂时没有评论,来抢沙发吧~