google-map pdmarker 一些简单用例

最新推荐文章于 2022-07-05 10:10:43 发布

iteye_14276

最新推荐文章于 2022-07-05 10:10:43 发布

阅读量287

点赞数

分类专栏：技术文章文章标签： Google JavaScript CSS HTML Microsoft ViewUI

本文链接：https://blog.csdn.net/iteye_14276/article/details/81645801

版权

技术文章专栏收录该内容

10 篇文章 0 订阅

订阅专栏

■Sample HTML

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google Maps JavaScript API Example - simple</title>
<style type="text/css">

</style>

<script src="http://maps.google.co.jp/maps?file=api&v=2&key=～&datum=wgs84" type="text/javascript"></script>

<script type="text/javascript" src="pdmarker.js"></script>

<script type="text/javascript">
//<![CDATA[
window.onload = onPageLoad;
var map;
function onPageLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(49.28124, -123.12035), 17-5);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//
marker = new PdMarker(new GLatLng(49.28124,-123.12035));
marker.setTooltip("Vancouver");
var html = "Visit <a href='http://www.yourvancouver.com'>Vancouver<\/a>";
marker.setDetailWinHTML(html);
marker.setHoverImage("http://www.google.com/mapfiles/dd-start.png");
map.addOverlay(marker);
}
}
//]]>
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px"></div>

<div id="pdmarkerwork"></div>
</body>
</html>

■View this example.

Interface: GMap Extensions
This collection of functions makes it easier to maintain a dynamic collection of markers.

// get a marker by id
var marker = map.getMarkerById(50);

// walk through markers and do something to them
var marker = map.getFirstMarker();
while (marker != null) {
doMyFunction(marker);
marker = map.getNextMarker();
}

// less efficient walk, but works
var count = map.getMarkerCount();
for (var i = 0; i < count; i++)
doMyFunction(map.getNthMarker(i));

// special case: remove all markers (removeOverlays will remove paths as well)
var marker = map.getFirstMarker();
while (marker != null) {
marker.remove();
marker = map.getFirstMarker();
}
map.zoomToMarkers(); // center and zoom on markers
map.zoomToMarkers(5); // center and zoom with 5% slop
map.zoomToMarkers(5,2); // center and zoom with 5% slop, 2% vertical compensation

Interface: PdMarker - GMarker extensions
This collection of routines adds new functionality to markers supplied by the Google Maps API.

■Creation

// marker creation examples
var marker = new PdMarker(new GLatLng(lat, long));
var marker = new PdMarker(new GLatLng(lat, long), icon);
var marker = new PdMarker(new GLatLng(lat, long), icon, "Vancouver Library");

■Data Storage

var id = marker.getId(); // retrieve internal id
marker.setId(20); // over-ride internal id
var name = marker.getName();
marker.setName("My School");
var user1 = marker.getUserData();
marker.setUserData("whatever");
var user2 = marker.getUserData2();
marker.setUserData2(3.1415926);

■Behaviour

marker.display(false); // hide this marker

// warning: lots of blinking markers will slow your page
marker.blink(true,500); // make this marker blink every 1/2 second
marker.blink(false,0); // stop blinking

// basic marker detail window example (opening and closing handled)
marker.setTooltip("some text");
marker.setDetailWinHTML(html); // display this html when marker is clicked
marker.setHoverImage("http://www.google.com/mapfiles/dd-start.png");

// change marker appearance when hovering
GEvent.addListener(marker, "mouseover", function() {
marker.setImage("images/markeryellow.png"); // change graphic
marker.topMarkerZIndex(); // bring marker to top
});
GEvent.addListener(marker, "mouseout", function() {
marker.restoreImage();
marker.restoreMarkerZIndex();
});

// click on marker and tooltip stays around, changes css class
// click again to hide
GEvent.addListener(marker, "click", function() {
if (marker.getMouseOutEnabled()) {
// don't hide on hover, disable setImage, restoreImage
marker.setMouseOutEnabled(false);
marker.setOpacity(100); // not transparent
marker.setTooltipClass("markerTooltipAlternate"); // change css class
} else {
marker.setMouseOutEnabled(true); // hide after hover
marker.setOpacity(70); // 30% transparent
marker.resetTooltipClass(); // restore default css class
}
});

// Globally set left/right rules for tooltips
marker.allowLeftTooltips(false); // always on right side for ALL markers
var setting = marker.getTooltipHiding();
marker.setTooltipHiding(false); // never hide tooltip

// enable/disable setImage, restoreImage, and setHoverImage changes
marker.setImageEnabled(false); // don't allow changes to marker image

// change marker icon, see Google Map API regarding custom icons
marker.setIcon(icon);

// show help cursor when hovering, not for Explorer at present
marker.setCursor("help");

// standard browser tooltip, fast, lightweight, text only
marker.setTitle("Vancouver Library"); // not for Explorer at present

// styled tooltip, draws to left when there is insufficient space on right
// style div.markerTooltip (see Simple Example) to define appearance
var html = "Styled tooltip<br/><img src='images/sample.jpg' height='100' width='100'/>";
marker.setTooltip(html); // html will appear on marker hover
marker.showTooltip(); // force tooltip to appear
marker.hideTooltip(); // force tooltip to hide

// set tooltip transparency, default is 70
marker.setOpacity(70); // 70% opaque (30% transparent)

// get the marker's latitude and longitude, and move it
var pt = marker.getPoint();
marker.setPoint(new GLatLng(pt.lat() + .1, pt.lng() + .1));