如何在地图上绕特定城市画圈? [英] How to make a circle around a particular city on a map?
问题描述
我正在一个项目中,我想在Google地图上在项目的位置周围画一个圆圈.在我下面的代码中,如果我单击show
标签,则它应该在Google地图上的项目位置周围显示圆圈:
I am working on a project in which I want to make a circle around the location of an item on a google map. In my below code if I click show
tab then it should show circle around item's location on a google map:
<div class="tab-pane" id="show">
<p>
<span class="heading_size">show:</span>
</p>
<p class="text-justify mb-0 pb-5">
<!-- <? php echo strtolower($data['item']->item_address); ?> -->
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var amsterdam = new google.maps.LatLng(52.395715,4.888916);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: amsterdam, zoom: 7};
var map = new google.maps.Map(mapCanvas,mapOptions);
var myCity = new google.maps.Circle({
center: amsterdam,
radius: 50000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
myCity.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</p>
</div>
问题陈述:
下面是我在打印item_address
时使用回显打印出的项目详细信息,如上面的代码(此时已注释)所示.所以我需要使用下面的数据在下面的json中的city
字段周围画圈.例如:在下面的json中-city字段为ottawa
,因此它应该绕着ottawa city绕圈.到目前为止,我可以在特定的经纬度上画圈,但是如果我有一个城市名称,那我该如何在那个城市上画圈呢?这可能吗?
Below is the item details that gets printed out when I print item_address
as shown in the above code (commented at this moment) using echo. So I need to use below data to make a circle around city
field in the below json. For example: in the below json - city field is ottawa
so it should make circle around ottawa city. As of now I can make circle around a particular lat/long but instead if I have a city name, then how can I make a circle around that city? Is this possible to do?
{
"address_id": 115,
"country": "canada",
"state": "ontario",
"city": "ottawa",
"street": "riverside drive",
"number": "1750",
"postal": "k1g 3t6"
}
推荐答案
您需要使用地理编码来找出城市在地图上的位置.您可以在下面查看工作示例.
You need to use Gecoding to find out position of city on the map. You can take a look at working example below.
我创建了以下函数,该函数可让您在传递给该函数的任何城市周围绘制圆圈:
I have created following function which allows you to draw circle around any city that you pass to the function:
google.maps.event.addDomListener(window, "load", function() {
myMap();
});
function myMap() {
//add global geocoder
window.geocoder = new google.maps.Geocoder();
var mapCanvas = document.getElementById("map_div");
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(33.808678, -117.918921)
};
window.map = new google.maps.Map(mapCanvas, mapOptions);
drawCircleAroundCity('ottawa');
}
function drawCircleAroundCity(cityName) {
if (!cityName) return;
if (!window.geocoder) throw "Geocoder is not loaded";
window.geocoder.geocode({
'address': cityName
}, function(results, status) {
if (status == 'OK') {
addCircle(results[0].geometry.location, true);
} else {
throw 'Unable to find address: ' + address;
}
});
}
function addCircle(position, recenter) {
if (typeof(position) != 'object') return;
if (!window.map) throw "Map is not loaded";
var myCity = new google.maps.Circle({
center: position,
radius: 50000,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.4
});
myCity.setMap(window.map);
if (recenter)
window.map.setCenter(position);
}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map_div" style="height: 400px;"></div>
这篇关于如何在地图上绕特定城市画圈?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!