|
 |
| |
ขอความอนุเคราะห์แนะนำการทำ googlemap overlay + หมุด ด้วยครับ |
| |
 |
|
|
 |
 |
|
Code (PHP)
<html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<head>
<title>Google Maps JavaScript API v3 Example: ProjectedOverlayTest </title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="ProjectedOverlay.js"></script>
<script type="text/javascript">
var overlay ;
var map ;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 10,
center: new google.maps.LatLng(13.661333,102.417419),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
overlayAdd() ;
}
// Add the overlay
function overlayAdd()
{
var sw = new google.maps.LatLng(13.261333,101.917419) ;
var ne = new google.maps.LatLng(14.221789,102.952881) ;
var bounds = new google.maps.LatLngBounds(sw,ne) ;
overlay = new ProjectedOverlay(map,'http://www.usnaviguide.com/ws-2008-02/images/us_counties_projected.png', bounds, {}) ;
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:90%"></div>
<!-- Opacity:
<a href="javascript:overlay.setOpacity(25)">25%</a>
<a href="javascript:overlay.setOpacity(50)">50%</a>
<a href="javascript:overlay.setOpacity(100)">100%</a>
<span id="overlayToggle"></span>
--></body>
</html>
แต่เมื่อผมนำเอา คำสั่งปักหมุดเข้าไป มันหายไปทั้ง overlay ทั้งหมุดครับ รบกวนผู้รู้ช่วยชี้แนะแก้ไขให้หน่อยคับ
Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2013-01-25 10:19:01 |
By :
Parakiss |
View :
2980 |
Reply :
3 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ยังไงน่ะ ไม่เห็นภาพเลย
|
| |
|
|
| |
| Date :
2013-01-27 19:48:56 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อยากรู้เหมือนกันค่ะ จะปักหมุดยังไง ตัวอย่างตามนี้เลยค่ะ>>> http://www.usnaviguide.com/v3maps/ProjectedOverlayTest.htm
|
| |
|
|
| |
| Date :
2013-03-12 13:50:32 |
By :
NaRza |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
อันนี้เป็นตัวเลือกครับ http://www.mayzes.org/googlemaps.jquery.html
ของผมจะใช้ api ของ google ต้องสมัครกับ google ก่อน https://developers.google.com/maps/
ได้คีย์มา ก็จัดการ code ครับ
ส่วนนี้คือ code ตัวอย่าง
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=คีย์ที่คุณต้องสมัครถ้าขึ้นเว็บแต่ถ้ารัน localhost ใส่อะไรเข้าไปก็ได้" type="text/javascript"></script>
<script type="text/javascript">
var map;
var ge;
google.load("maps", "2.x");
function init() {
map = new GMap2(document.getElementById('map3d'));
map.setCenter(new GLatLng(13.70449,100.335238), 12);
var mapui = map.getDefaultUI();
mapui.maptypes.physical = false;
map.setUI(mapui);
// add 'Earth' as one of the map types
map.addMapType(G_SATELLITE_3D_MAP);
// create a marker
var marker = new GMarker(new GLatLng(13.70449,100.335238));
GEvent.addListener(marker, "click", function() {
var html = '<div style="width: 210px; padding-right: 10px">Hello world!</div>';
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
google.maps.Event.trigger(marker, "click");
// create a polyline (LineString Placemark in KML)
var polyline = new GPolyline([
new GLatLng(13.72, 100.31),
new GLatLng(13.72, 100.36),
new GLatLng(13.69, 100.36),
new GLatLng(13.69, 100.31),
new GLatLng(13.72, 100.31)
], "#ff0000", 10);
map.addOverlay(polyline);
// do stuff with Earth when the user switches to it
GEvent.addListener(map, 'maptypechanged', function() {
if (ge)
return;
map.getEarthInstance(function(pluginInstance) {
ge = pluginInstance;
doStuffWithEarth();
});
});
}
function doStuffWithEarth() {
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 600px; height: 300px;"></div>
<br>
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-03-12 15:44:08 |
By :
vissarud |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
