如何在地图上围绕特定城市画圈?
How to make a circle around a particular city on a map?
我正在做一个项目,我想在 在 google 地图上围绕项目 的位置画一个圆圈。在我下面的代码中,如果我单击 show
选项卡,那么它应该在 google 地图上显示围绕项目位置的圆圈:
<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
时打印出来的项目详细信息,如上面的代码(此时已注释)使用echo。所以我需要使用下面的数据在下面的 json 中围绕 city
字段做一个圆圈。例如:在下面的 json - 城市字段是 ottawa
所以它应该围绕渥太华市。截至目前,我可以围绕特定的 lat/long 转圈,但如果我有城市名称,那么如何围绕该城市转圈?这可能吗?
{
"address_id": 115,
"country": "canada",
"state": "ontario",
"city": "ottawa",
"street": "riverside drive",
"number": "1750",
"postal": "k1g 3t6"
}
使用 Google 地图 Geocoding API 并根据您的 JSON 字段构建适当的请求。 API 将 return 包含纬度和经度值的 JSON 对象。
您的 API 请求将采用以下形式:
https://maps.googleapis.com/maps/api/geocode/json?address=1750+riverside+drive,ottawa,ontario,canada&key=YOUR_API_KEY
将一个城市翻译成 LatLon 不会太难,但这里有一些代码我可以盲目复制而不用想太多。 HTH.
var circleOptions = {
clickable: true,
draggable: true,
editable: true,
visible: false,
strokeColor: 'gray',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'gray',
fillOpacity: 0.35,
center: marker.getPosition()
};
radarCircle = new radarView(new google.maps.Circle(circleOptions));
google.maps.event.addDomListener(radarCircle, 'center_changed', reScope);
google.maps.event.addDomListener(radarCircle, 'radius_changed', reScope);
function radarView(superBase)
{
this.__proto__ = superBase;
if (this instanceof google.maps.Circle) {
augmentCircle.apply(this);
} else if (this instanceof google.maps.Rectangle) {
augmentRectangle.apply(this);
} else {
Tier3Toolbox.reportError({header:"Internal error",
message:"Inheriting from unknown object"});
}
this.doX = function(x){return "x is>" + x;};
return this;
}
function augmentCircle()
{
this.moveBorder = function()
{
google.maps.event.trigger(radarCircle,"center_changed");
}
}
function augmentRectangle()
{
this.moveBorder = function()
{
google.maps.event.trigger(radarRectangle,"bounds_changed");
}
}
function reScope() {
var searchReq = {'cmd':'search', 'scopeVintage':scopeVintage};
if (radarShape.getCenter) {
searchReq.checker = 0;
var currCenter = radarCircle.getCenter();
searchReq.centerLat = currCenter.lat();
searchReq.centerLng = currCenter.lng();
searchReq.radius = radarCircle.getRadius();
} else {
searchReq.checker = 1;
searchReq.SWLat = radarShape.getBounds().getSouthWest().lat();
searchReq.SWLng = radarShape.getBounds().getSouthWest().lng();
searchReq.NELat = radarShape.getBounds().getNorthEast().lat();
searchReq.NELng = radarShape.getBounds().getNorthEast().lng();
}
facFinder.postMessage(searchReq);
}
您需要使用地理编码来找出城市在地图上的位置。您可以查看下面的工作示例。
我创建了以下函数,它允许您在传递给该函数的任何城市周围画圈:
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>
我正在做一个项目,我想在 在 google 地图上围绕项目 的位置画一个圆圈。在我下面的代码中,如果我单击 show
选项卡,那么它应该在 google 地图上显示围绕项目位置的圆圈:
<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
时打印出来的项目详细信息,如上面的代码(此时已注释)使用echo。所以我需要使用下面的数据在下面的 json 中围绕 city
字段做一个圆圈。例如:在下面的 json - 城市字段是 ottawa
所以它应该围绕渥太华市。截至目前,我可以围绕特定的 lat/long 转圈,但如果我有城市名称,那么如何围绕该城市转圈?这可能吗?
{
"address_id": 115,
"country": "canada",
"state": "ontario",
"city": "ottawa",
"street": "riverside drive",
"number": "1750",
"postal": "k1g 3t6"
}
使用 Google 地图 Geocoding API 并根据您的 JSON 字段构建适当的请求。 API 将 return 包含纬度和经度值的 JSON 对象。
您的 API 请求将采用以下形式:
https://maps.googleapis.com/maps/api/geocode/json?address=1750+riverside+drive,ottawa,ontario,canada&key=YOUR_API_KEY
将一个城市翻译成 LatLon 不会太难,但这里有一些代码我可以盲目复制而不用想太多。 HTH.
var circleOptions = {
clickable: true,
draggable: true,
editable: true,
visible: false,
strokeColor: 'gray',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: 'gray',
fillOpacity: 0.35,
center: marker.getPosition()
};
radarCircle = new radarView(new google.maps.Circle(circleOptions));
google.maps.event.addDomListener(radarCircle, 'center_changed', reScope);
google.maps.event.addDomListener(radarCircle, 'radius_changed', reScope);
function radarView(superBase)
{
this.__proto__ = superBase;
if (this instanceof google.maps.Circle) {
augmentCircle.apply(this);
} else if (this instanceof google.maps.Rectangle) {
augmentRectangle.apply(this);
} else {
Tier3Toolbox.reportError({header:"Internal error",
message:"Inheriting from unknown object"});
}
this.doX = function(x){return "x is>" + x;};
return this;
}
function augmentCircle()
{
this.moveBorder = function()
{
google.maps.event.trigger(radarCircle,"center_changed");
}
}
function augmentRectangle()
{
this.moveBorder = function()
{
google.maps.event.trigger(radarRectangle,"bounds_changed");
}
}
function reScope() {
var searchReq = {'cmd':'search', 'scopeVintage':scopeVintage};
if (radarShape.getCenter) {
searchReq.checker = 0;
var currCenter = radarCircle.getCenter();
searchReq.centerLat = currCenter.lat();
searchReq.centerLng = currCenter.lng();
searchReq.radius = radarCircle.getRadius();
} else {
searchReq.checker = 1;
searchReq.SWLat = radarShape.getBounds().getSouthWest().lat();
searchReq.SWLng = radarShape.getBounds().getSouthWest().lng();
searchReq.NELat = radarShape.getBounds().getNorthEast().lat();
searchReq.NELng = radarShape.getBounds().getNorthEast().lng();
}
facFinder.postMessage(searchReq);
}
您需要使用地理编码来找出城市在地图上的位置。您可以查看下面的工作示例。
我创建了以下函数,它允许您在传递给该函数的任何城市周围画圈:
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>