【发布时间】：2013-08-24 19:09:55
【问题描述】：
我正在实施以显示标记周围坐标集中的形状。这是我的 html 和 js 代码，但似乎无法正常工作，我错过了其中的一些内容。请帮我解决这个问题。
以及如何从同一个 XML 文件中获取以下坐标并创建数组以绘制形状并使其居中。
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
var triangleCoords = [
new google.maps.LatLng(17.74033553, 83.25067267),
new google.maps.LatLng(17.73254774, 83.29195094),
new google.maps.LatLng(17.73995296, 83.25317370),
new google.maps.LatLng(17.73985100, 83.25417283),
new google.maps.LatLng(17.73420624, 83.29552820),
new google.maps.LatLng(17.74752536, 83.24668705)
];
HTML代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/en/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/en/js/markers.js">
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="map">
</div>
<input type="button" id="showmarkers" value="Show Markers" />
</form>
</body>
</html>
显示标记和形状的js代码。
$(document).ready(function () {
$("#map").css({
height: 500,
width: 600
});
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
MYMAP.init('#map', myLatLng, 11);
$("#showmarkers").click(function (e) {
MYMAP.placeMarkers('markers.xml');
});
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function (selector, latLng, zoom) {
var myOptions = {
zoom: zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function (filename) {
$.get(filename, function (xml) {
$(xml).find("marker").each(function () {
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var triangleCoords = [
new google.maps.LatLng(17.74033553, 83.25067267),
new google.maps.LatLng(17.73254774, 83.29195094),
new google.maps.LatLng(17.73995296, 83.25317370),
new google.maps.LatLng(17.73985100, 83.25417283),
new google.maps.LatLng(17.73420624, 83.29552820),
new google.maps.LatLng(17.74752536, 83.24668705)
];
// Construct the polygon
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html = '<strong>' + name + '</strong.><br />' + address;
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
XML 文件
<markers>
<marker>
<name>VODAFONE</name>
<address>near Ghumaghumalu Restaurant, Marripalem, Visakhapatnam</address>
<lat>17.74033553</lat>
<lng>83.25067267</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Viswa Teja School, Thatichetlapalem, Visakhapatnam</address>
<lat>17.73254774</lat>
<lng>83.29195094</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Masjid, Marripalem, Visakhapatnam</address>
<lat>17.73995296</lat>
<lng>83.25317370</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Masjid, Sai Nagar, Visakhapatnam</address>
<lat>17.73985100</lat>
<lng>83.25417283</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Sai Baba Temple, Akkayya Palem, Visakhapatnam</address>
<lat>17.73420624</lat>
<lng>83.29552820</lng>
</marker>
<marker>
<name>VODAFONE</name>
<address>near Geological Survey of India, R & B, Visakhapatnam</address>
<lat>17.74752536</lat>
<lng>83.24668705</lng>
</marker>
</markers>
----------- 下面是只显示标记的工作 js 代码，但上面的 js 文件是显示标记和多边形形状。
$(document).ready(function() {
$("#map").css({
height: 500,
width: 600
});
var myLatLng = new google.maps.LatLng(17.74033553, 83.25067267);
MYMAP.init('#map', myLatLng, 11);
$("#showmarkers").click(function(e){
MYMAP.placeMarkers('markers.xml');
});
});
var MYMAP = {
map: null,
bounds: null
}
MYMAP.init = function(selector, latLng, zoom) {
var myOptions = {
zoom:zoom,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map($(selector)[0], myOptions);
this.bounds = new google.maps.LatLngBounds();
}
MYMAP.placeMarkers = function(filename) {
$.get(filename, function(xml){
$(xml).find("marker").each(function(){
var name = $(this).find('name').text();
var address = $(this).find('address').text();
// create a new LatLng point for the marker
var lat = $(this).find('lat').text();
var lng = $(this).find('lng').text();
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
// extend the bounds to include the new point
MYMAP.bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: MYMAP.map
});
var infoWindow = new google.maps.InfoWindow();
var html='<strong>'+name+'</strong.><br />'+address;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(MYMAP.map, marker);
});
MYMAP.map.fitBounds(MYMAP.bounds);
});
});
}
【问题讨论】：
-
您是否遇到任何错误。
-
是的，它不会显示标记和形状，但是如果你从上面的 js 文件中删除显示线的坐标，那么它会显示标记，但我也想显示折线和标记。谢谢你的头到此为止
-
我的意思是，如果您删除 // Construct the polygon 部分，它将正常工作。请注意，我刚刚在我的第一篇文章中使用工作 js 代码编辑以显示标记，但它不会显示坐标集中的形状。
-
你想做什么？使用 XML 文件中标记的坐标来创建一个多边形 also 或在 XML 中定义一个多边形来显示标记？
标签： google-maps jquery google-maps-api-3 maps