这就是我想要完成的事情(在我引入的地址周围找到一个带圆圈的地图而不标记确切的地址)
我有以下代码:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script> <div style='overflow:hidden;width:50%;'> <div id='gmap_canvas' style='height:440px;width:700px;'></div><div></div> <style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <script type='text/javascript'> function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.5073509,-0.12775829999998223)});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>这产生了这个结果:
我的问题是:
如何在给定地址周围制作圆圈? 我知道这是生成标记的代码,我想删除它并制作圆圈
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.5073509,-0.12775829999998223)})非常感谢
UPDATE
新规范
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'> </script><div style='overflow:hidden;width:50%;'> <div id='gmap_canvas' style='height:440px;width:700px;'></div> <style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:13,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);myCircle = new google.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35,map:map,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),radius:100;});google.maps.event.addDomListener(window, 'load', init_map);</script>我删除了:
marker = new google.maps.Marker({map:map,position:new google.maps.LatLng(51.5073509,-0.12775829999998223)})
包括:
myCircle = new google.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35,map:map,center:new google.maps.LatLng(51.5073509) ,-0.12775829999998223),半径:100;})
This is what I'm trying to accomplish (getting a map with a circle around the address I introduce without marking the exact address)
I have the following code:
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script> <div style='overflow:hidden;width:50%;'> <div id='gmap_canvas' style='height:440px;width:700px;'></div><div></div> <style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <script type='text/javascript'> function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.5073509,-0.12775829999998223)});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>That produces this result:
My question is:
How do I make the circle around the giving address? I know this is the code that produces the marker and I would like to remove that and make the circle around
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.5073509,-0.12775829999998223)})Thank you so much
UPDATE
New Code
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'> </script><div style='overflow:hidden;width:50%;'> <div id='gmap_canvas' style='height:440px;width:700px;'></div> <style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:13,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);myCircle = new google.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35,map:map,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),radius:100;});google.maps.event.addDomListener(window, 'load', init_map);</script>I removed:
marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.5073509,-0.12775829999998223)})
and included:
myCircle = new google.maps.Circle({strokeColor:'#FF0000',strokeOpacity:0.8,strokeWeight:2,fillColor:'#FF0000',fillOpacity:0.35,map:map,center:new google.maps.LatLng(51.5073509,-0.12775829999998223),radius:100;})
最满意答案
您可以使用圆而不是标记
var myCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, center: new google.maps.LatLng(51.5073509,-0.12775829999998223), radius: 100 });You can use circle instead of marker
var myCircle = new google.maps.Circle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, center: new google.maps.LatLng(51.5073509,-0.12775829999998223), radius: 100 });更多推荐
发布评论