Google 地图 V3 多个带有方向的标记
我的代码在下面,我只想添加另一个标记,并能够单击该标记并显示该标记的说明。有一个小表格可以在地图下方生成行车路线。我查遍了互联网并搜索了银河系,但我无法弄清楚这件事
<h2>Get Driving Directions</h2>
<p>
<label> coming from: <input class="roundInput" id="to-input" type="text" value="" /> </label> <input style="position:relative;top:6px;" type="image" src="<?php bloginfo('template_directory'); ?>/img/route_button.gif" value="route" onclick="doDirections()" />
<div id="dynamicDirections" style="margin-left:30px">
</div>
</p>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript">
// <![CDATA[
var psGlobals={
address:'3908 Aurora Ave N, Seattle, WA 98103 ',
lat:47.6545077,
lon:-122.3471123,
zoomlevel:13
};
function initialize()
{
psGlobals.latlng = new google.maps.LatLng(psGlobals.lat, psGlobals.lon);
buildMap();
psGlobals.dirRenderer = new google.maps.DirectionsRenderer();
psGlobals.dirService = new google.maps.DirectionsService();
}
function buildMap()
{
var myOptions, marker;
myOptions = {
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
},
mapTypeControl: true,
scaleControl: false,
zoom: psGlobals.zoomlevel,
center: psGlobals.latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
psGlobals.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
psGlobals.marker = new google.maps.Marker({
position: psGlobals.latlng,
map: psGlobals.map,
title:"4Evergreengroup"
});
}
function doDirections()
{
var fromStr = $('#to-input').val();
var dirRequest = {
origin: fromStr,
destination: psGlobals.address,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
psGlobals.dirService.route(dirRequest, handleDirections);
}
function handleDirections(dirResult,dirStatus)
{
if (dirStatus != google.maps.DirectionsStatus.OK)
{
alert('Directions failed: ' + dirStatus);
return;
}
psGlobals.dirRenderer.setMap(psGlobals.map);
psGlobals.dirRenderer.setPanel(document.getElementById('dynamicDirections'));
psGlobals.dirRenderer.setDirections(dirResult);
}
$(document).ready(function(){initialize()});
// ]]>
</script>
My code is below I just want to add another marker and be able to click on that marker and have the directions show up for that one instead. There is a small form that produces driving directions below the map. I've look all across the internet and searched the milky way galaxy and I can't figure this thing out
<h2>Get Driving Directions</h2>
<p>
<label> coming from: <input class="roundInput" id="to-input" type="text" value="" /> </label> <input style="position:relative;top:6px;" type="image" src="<?php bloginfo('template_directory'); ?>/img/route_button.gif" value="route" onclick="doDirections()" />
<div id="dynamicDirections" style="margin-left:30px">
</div>
</p>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript">
// <![CDATA[
var psGlobals={
address:'3908 Aurora Ave N, Seattle, WA 98103 ',
lat:47.6545077,
lon:-122.3471123,
zoomlevel:13
};
function initialize()
{
psGlobals.latlng = new google.maps.LatLng(psGlobals.lat, psGlobals.lon);
buildMap();
psGlobals.dirRenderer = new google.maps.DirectionsRenderer();
psGlobals.dirService = new google.maps.DirectionsService();
}
function buildMap()
{
var myOptions, marker;
myOptions = {
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
},
mapTypeControl: true,
scaleControl: false,
zoom: psGlobals.zoomlevel,
center: psGlobals.latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
psGlobals.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
psGlobals.marker = new google.maps.Marker({
position: psGlobals.latlng,
map: psGlobals.map,
title:"4Evergreengroup"
});
}
function doDirections()
{
var fromStr = $('#to-input').val();
var dirRequest = {
origin: fromStr,
destination: psGlobals.address,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
psGlobals.dirService.route(dirRequest, handleDirections);
}
function handleDirections(dirResult,dirStatus)
{
if (dirStatus != google.maps.DirectionsStatus.OK)
{
alert('Directions failed: ' + dirStatus);
return;
}
psGlobals.dirRenderer.setMap(psGlobals.map);
psGlobals.dirRenderer.setPanel(document.getElementById('dynamicDirections'));
psGlobals.dirRenderer.setDirections(dirResult);
}
$(document).ready(function(){initialize()});
// ]]>
</script>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不确定这是否能回答您的问题。这是您的代码:
http://bobcravens.com/demos/temp/gmap1.html
单击“路线”按钮生成并插入路线。你原来的代码不适合我。我添加了“map_canvas”div 来为 google.maps 提供目标。看来现在可以工作了。让我知道是否还有更多?
鲍勃
Not certain if this answers your question. Here is your code:
http://bobcravens.com/demos/temp/gmap1.html
Clicking the 'route' button generates and inserts the directions. Your original code was not working for me. I added the 'map_canvas' div to give a target for google.maps. Seems to work now. Let me know if there is more?
Bob