如何转换一个圆圈,两个矩形到多边形在谷歌地图上,并使其出现在同一地图上
How to convert a circles,two rectangles into Polygons on Google maps and make it appear on the same map
这是我的代码
我想要一个圆圈和矩形出现在同一个地图(Map1,Map2.html)..怎么做呢?
Map1.html
<script>
// This example creates circles on the map, representing
// populations in North America.
// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(45.637839, -73.648316),
population: 270
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 40 * 1000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
google.maps.event.addListener(map,'click',function(event) {
alert("Shan");
var map1=event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById("latlong").innerHTML=map1;
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Map2.html
<script>
// This example adds a red rectangle to a map.
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(45.16267407976457,-74.6630859375),
new google.maps.LatLng(46.1665167159516,-72.6580810546875))
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
把它们结合起来:
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(45.637839, -73.648316),
population: 270
};
var cityCircle;
function initialize() {
// Create the map.
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(45.637839, -73.648316),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
for (var city in citymap) {
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: 40 * 1000
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
}
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(45.16267407976457, -74.6630859375),
new google.maps.LatLng(46.1665167159516, -72.6580810546875))
});
google.maps.event.addListener(map, 'click', function (event) {
alert("Shan");
var map1 = event.latLng.lat() + ', ' + event.latLng.lng();
document.getElementById("latlong").innerHTML = map1;
})
}
google.maps.event.addDomListener(window, 'load', initialize);
相关文章:
- 获取SW&谷歌静态地图API的东北角
- 在谷歌js地图中添加多个位置
- 如何用数组而不是值正确填充谷歌图表(地图)
- 意大利各省(非地区)的谷歌地理地图可视化
- 使用谷歌静态地图 - JFrame或Javascript
- 如何在jquery对话框中初始化谷歌的地图
- 将谷歌地图样式转换为谷歌静态地图 URI 时出现问题
- 谷歌交通地图上的可拖动标记
- 如何在谷歌地理地图可视化中显示区域
- 有没有办法将信息窗口的信息放在谷歌API地图下,而不是在标记上
- 如何在谷歌静态地图上获得连续位置
- 谷歌地理地图JSON
- 如何从谷歌位置/地图获得更多结果
- 独特的,范围的颜色在谷歌地理地图
- 如何获得谷歌handle_geolocation_query地图显示方向从用户的位置
- 谷歌方向地图在Bootstrap模式不工作
- 如何添加自定义标记到谷歌方向地图在多个旅程的开始
- 动画谷歌API地图标记与CSS
- 谷歌api地图和主干错误
- 如何将php数组传递给谷歌JavaScript地图API制作标签