谷歌地图V3 - 航点+ infowindow随机文本 [英] Google Maps V3 - waypoints + infowindow with random text
本文介绍了谷歌地图V3 - 航点+ infowindow随机文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< title> Google Maps JavaScript API v3示例：Directions Waypoints< / title>
< style>
#map {
width：100％;
height：450px;
}
< / style>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script>
< script src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script>
jQuery（function（）{
var stops = [
{Geometry：{Latitude：52.1615470947258，Longitude：20.80514430999756}}，
{Geometry ：{Latitude：52.15991486090931，Longitude：20.804049968719482}}，
{Geometry：{Latitude：52.15772967999426，Longitude：20.805788040161133}}，
{Geometry Latitude：52.15586034371232，Longitude：20.80460786819458}}，
{Geometry：{Latitude：52.15923693975469，Longitude：20.80113172531128}}，
{Geometry ：52.159849043774074，Longitude：20.791990756988525}}，
{Geometry：{Latitude：52.15986220720892，Longitude：20.790467262268066}}，
{Geometry：{Latitude 经度：20.7806396484375}}，
{Geometry：{Latitude：52.16088894313116，Longitude：20.77737808227539}}，
{Geometry：{Latitude：52.15255590234335，Longitude：20.784244537353516}}，
{Geometry：{Latitude：52.14747369312591，Longitude：20.791218280792236}}，
{几何：{Latitude：52.14963304460396，Longitude：20.79387903213501}}
];
var map = new window.google.maps.Map（document.getElementById（map））;
//在传递
之前新增复杂对象var directionsDisplay = new window.google.maps.DirectionsRenderer（）;
var directionsService = new window.google.maps.DirectionsService（）;
Tour_startUp（停止）;
window.tour.loadMap（map，directionsDisplay）;
window.tour.fitBounds（map）;
if（stops.length> 1）
window.tour.calcRoute（directionsService，directionsDisplay）;
}）;
函数Tour_startUp（stops）{
if（！window.tour）window.tour = {
updateStops：function（newStops）{
stops = newStops;
}，
// map：google map object
// directionsDisplay：google directionsDisplay object（in empty）
loadMap：function（map，directionsDisplay）{
var myOptions = {
zoom：13，
center：new window.google.maps.LatLng（51.507937，-0.076188），//默认为伦敦
mapTypeId：window.google.maps。 MapTypeId.ROADMAP
};
map.setOptions（myOptions）;
directionsDisplay.setMap（map）;
}，
fitBounds：function（map）{
var bounds = new window.google.maps.LatLngBounds（）;
//为每个记录扩展边界
jQuery.each（stops，function（key，val）{
var myLatlng = new window.google.maps.LatLng（val。 Geometry.Latitude，val.Geometry.Longitude）;
bounds.extend（myLatlng）;
}）;
map.fitBounds（bounds）;
}，
calcRoute：function（directionsService，directionsDisplay）{
var batch = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start，1 stop和8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length> 0;
while（wayptsExist）{
var subBatch = [];
var subitemsCounter = 0;
for（var j = itemsCounter; j
subBatch.push（{
location：new window.google.maps.LatLng（stops [j] .Geometry.Latitude，stops [j] .Geometry.Longitude），
stopover：true
}）;
if（subitemsCounter == itemsPerBatch）
break;
}
itemsCounter + = subitemsCounter;
batches.push（subBatch）;
wayptsExist = itemsCounter< stops.length;
//如果它再次运行，仍然有点。减去1，然后继续
//在上一段旅程结束时启动
itemsCounter--;
}
//现在我们应该有一个2维数组，其中包含一个路标列表
var combinedResults;
var unsortedResults = [{}]; //保存计数器和结果本身，以便稍后对
var directionsResultsReturned = 0进行排序; （var k = 0; k
;
var start =批次[k] [0] .location;
var end =批次[k] [lastIndex] .location;
//修剪数组$ b $中的第一个和最后一个条目var waypts = [];
waypts =批次[k];
waypts.splice（0，1）;
waypts.splice（waypts.length - 1，1）;
var request = {
origin：start，
destination：end，
waypoints：waypts，
travelMode：window.google.maps.TravelMode。 WALKING
};
（function（kk）{
directionsService.route（request，function（result，status）{
if（status == window.google.maps.DirectionsStatus.OK）{
var unsortedResult = {order：kk，result：result};
unsortedResults.push（unsortedResult）;
directionsResultsReturned ++;
if（directionsResultsReturned == batches.length）//我们收到了所有的结果放到地图
{
//将返回的值排序为正确的顺序
unsortedResults.sort（function（a， b）{return parseFloat（a.order） - parseFloat（b.order）;}）;
var count = 0;
for（var key in unsortedResults）{
if（u nsortedResults [key] .result！= null）{
if（unsortedResults.hasOwnProperty（key））{
if（count == 0）// first results。新建combinedResults对象
combinedResults = unsortedResults [key] .result;
else {
//仅在我的统一对象中构建腿，overview_path和边界。这不是一个完整的
// directionResults对象，但足以在地图上绘制路径，这就是我需要的
combinedResults.routes [0] .legs = combinedResults.routes [0] .legs .concat（unsortedResults [键] .result.routes [0] .legs）;
combinedResults.routes [0] .overview_path = combinedResults.routes [0] .overview_path.concat（unsortedResults [key] .result.routes [0] .overview_path）;
combinedResults.routes [0] .bounds = combinedResults.routes [0] .bounds.extend（unsortedResults [key] .result.routes [0] .bounds.getNorthEast（））;
combinedResults.routes [0] .bounds = combinedResults.routes [0] .bounds.extend（unsortedResults [key] .result.routes [0] .bounds.getSouthWest（））;
}
count ++;
}
}
}
directionsDisplay.setDirections（combinedResults）;
}
}
}）;
}）（k）;
}
}
};
}
< / script>
< / head>
< body>
< div id =map>< / div>
< / body>
< / html>
它就像一个魅力，但我有问题为每个航点设置一个infowindow。我想留下像A，B，C这样的标记名称，或者在其他方面生成标记名称，但要保留A，B，C或1,2,3模式+我想为每个标记添加infowindow，这将包含标题文本和链接。
我试图找到任何信息或示例，但注意到了作品。也许有人有想法如何轻松地将infowindow添加到此代码中。
谢谢，
Charles
p>解决方案
下面是一个使用自定义标记和infowindows从头开始绘制方向的示例：
如果您在 DirectionsRenderer 上使用suppressInfoWindows选项，则可以只需使用其中创建标记及其相关信息的部分即可。
代码：
< script src =https：// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><!DOCTYPE html>< html> < HEAD> < meta name =viewportcontent =initial-scale = 1.0，user-scalable = no> < meta charset =utf-8> < title> Google Maps JavaScript API v3示例：Directions Waypoints< / title>< style> #map {width：100％; height：450px;}< / style> < script src =http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js>< / script> < script src =https://maps.googleapis.com/maps/api/js>< / script> <脚本> jQuery（function（）{var stops = [{Geometry：{Latitude：52.1615470947258，Longitude：20.80514430999756}}，{Geometry：{Latitude：52.15991486090931，Longitude：20.804049968719482}}， {Geometry：{Latitude：52.15772967999426，Longitude：20.805788040161133}}，{Geometry：{Latitude：52.15586034371232，Longitude：20.80460786819458}}，{Latitude 52.15923693975469Longitude：20.80113172531128}} {Geometry：{Latitude：52.159849043774074，Longitude：20.791990756988525}}，{Geometry：{Latitude：52.15986220720892，Longitude：20.790467262268066}}， {Geometry：{Latitude：52.16202095784738，Longitude：20.7806396484375}}，{Geometry：{Latitude：52.16088894313116，Longitude：20.77737808227539}}，{Latitude 52.15255590234335， 经度： 20.784244537353516}}，{Geometry：{Latitude：52.14747369312591，Longitude：20.791218280792236}}，{Geometry：{Latitude：52.14963304460396，Longitude：20.79387903213501}}] var map = new window.google.maps.Map（document.getElementById（map））; //在将它们传递给var directionsDisplay = new window.google.maps.DirectionsRenderer（{suppressMarkers：true}）之前，新建复杂对象; var directionsService = new window.google.maps.DirectionsService（）; Tour_startUp（停止）; window.tour.loadMap（地图，directionsDisplay）; window.tour.fitBounds（地图）; if（stops.length> 1）window.tour.calcRoute（directionsService，directionsDisplay）;}）; function Tour_startUp（stops）{if（！window.tour）window.tour = {updateStops：function（newStops）{stops = newStops; }，// map：google map object // directionsDisplay：google directionsDisplay object（in empty）loadMap：function（map，directionsDisplay）{var myOptions = {zoom：13，center：new window.google.maps.LatLng（51.507937 ，-0.076188），//默认为伦敦mapTypeId：window.google.maps.MapTypeId.ROADMAP}; map.setOptions（myOptions）; directionsDisplay.setMap（地图）; }，fitBounds：function（map）{var bounds = new window.google.maps.LatLngBounds（）; //停止，函数（key，val）{var myLatlng = new window.google.maps.LatLng（val.Geometry.Latitude，val.Geometry.Longitude）; bounds.extend（myLatlng ）;}）; map.fitBounds（边界）; }，calcRoute：function（directionsService，directionsDisplay）{var batch = []; var itemsPerBatch = 10; // google API max = 10 - 1 start，1 stop和8 waypoints var itemsCounter = 0; var wayptsExist = stops.length> 0; while（wayptsExist）{var subBatch = []; var subitemsCounter = 0; for（var j = itemsCounter; j
Im using this example to set up a route with more then 8 markers.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<style>
#map{
width: 100%;
height: 450px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
jQuery(function() {
var stops = [
{"Geometry":{"Latitude":52.1615470947258,"Longitude":20.80514430999756}},
{"Geometry":{"Latitude":52.15991486090931,"Longitude":20.804049968719482}},
{"Geometry":{"Latitude":52.15772967999426,"Longitude":20.805788040161133}},
{"Geometry":{"Latitude":52.15586034371232,"Longitude":20.80460786819458}},
{"Geometry":{"Latitude":52.15923693975469,"Longitude":20.80113172531128}},
{"Geometry":{"Latitude":52.159849043774074, "Longitude":20.791990756988525}},
{"Geometry":{"Latitude":52.15986220720892,"Longitude":20.790467262268066}},
{"Geometry":{"Latitude":52.16202095784738,"Longitude":20.7806396484375}},
{"Geometry":{"Latitude":52.16088894313116,"Longitude":20.77737808227539}},
{"Geometry":{"Latitude":52.15255590234335,"Longitude":20.784244537353516}},
{"Geometry":{"Latitude":52.14747369312591,"Longitude":20.791218280792236}},
{"Geometry":{"Latitude":52.14963304460396,"Longitude":20.79387903213501}}
] ;
var map = new window.google.maps.Map(document.getElementById("map"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer();
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);
});
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
// map: google map object
// directionsDisplay: google directionsDisplay object (comes in empty)
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom: 13,
center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
map.setOptions(myOptions);
directionsDisplay.setMap(map);
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: window.google.maps.TravelMode.WALKING
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
}
}
});
})(k);
}
}
};
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
It works like a charm but i have problem to setup an infowindow for each waypoint. I would like to leave markers names like A , B ,C or generate it in otherway but to keep A,B,C or 1,2,3 pattern + i want to add infowindow to each marker wich will contains title text and link.
I was trying to find any info or examples but noting works. Maybe someone have and idea how to easy add infowindow to this code.
Thank You,
Charles
解决方案
Here is an example that draws the directions from scratch with custom markers and infowindows:
If you use the suppressInfoWindows option on the DirectionsRenderer, you can just use the part of it that creates the markers and their associated infowindows.
Working example based on your code
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Directions Waypoints</title>
<style>
#map{
width: 100%;
height: 450px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
jQuery(function() {
var stops = [
{"Geometry":{"Latitude":52.1615470947258,"Longitude":20.80514430999756}},
{"Geometry":{"Latitude":52.15991486090931,"Longitude":20.804049968719482}},
{"Geometry":{"Latitude":52.15772967999426,"Longitude":20.805788040161133}},
{"Geometry":{"Latitude":52.15586034371232,"Longitude":20.80460786819458}},
{"Geometry":{"Latitude":52.15923693975469,"Longitude":20.80113172531128}},
{"Geometry":{"Latitude":52.159849043774074, "Longitude":20.791990756988525}},
{"Geometry":{"Latitude":52.15986220720892,"Longitude":20.790467262268066}},
{"Geometry":{"Latitude":52.16202095784738,"Longitude":20.7806396484375}},
{"Geometry":{"Latitude":52.16088894313116,"Longitude":20.77737808227539}},
{"Geometry":{"Latitude":52.15255590234335,"Longitude":20.784244537353516}},
{"Geometry":{"Latitude":52.14747369312591,"Longitude":20.791218280792236}},
{"Geometry":{"Latitude":52.14963304460396,"Longitude":20.79387903213501}}
] ;
var map = new window.google.maps.Map(document.getElementById("map"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer({suppressMarkers: true});
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);
});
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
// map: google map object
// directionsDisplay: google directionsDisplay object (comes in empty)
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom: 13,
center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
map.setOptions(myOptions);
directionsDisplay.setMap(map);
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
travelMode: window.google.maps.TravelMode.WALKING
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
var legs = combinedResults.routes[0].legs;
// alert(legs.length);
for (var i=0; i < legs.length;i++){
var markerletter = "A".charCodeAt(0);
markerletter += i;
markerletter = String.fromCharCode(markerletter);
createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address,markerletter);
}
var i=legs.length;
var markerletter = "A".charCodeAt(0);
markerletter += i;
markerletter = String.fromCharCode(markerletter);
createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,"marker"+i,"some text for the "+i+"marker<br>"+legs[legs.length-1].end_address,markerletter);
}
}
});
})(k);
}
}
};
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
function getMarkerImage(iconStr) {
if ((typeof(iconStr)=="undefined") || (iconStr==null)) {
iconStr = "red";
}
if (!icons[iconStr]) {
icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/marker"+ iconStr +".png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
}
return icons[iconStr];
}
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
function createMarker(map, latlng, label, html, color) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
shadow: iconShadow,
icon: getMarkerImage(color),
shape: iconShape,
title: label,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
marker.myname = label;
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
return marker;
}
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
这篇关于谷歌地图V3 - 航点+ infowindow随机文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
