HTML Bing Maps AJAX控件7.0：可拖动的Pushpins
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML Bing Maps AJAX控件7.0：可拖动的Pushpins相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de-de" type="text/javascript" charset="UTF-8"></script>
</head>
<body onload="init();">
<div id="myMap" style="position: relative; width: 800px; height: 300px;"></div>
<script type="text/javascript">
// Event handlers
function onStartDragPin(e){
console.log('dragstart');
}
function onDragPin(e){
console.log('drag: ' + e.entity.getLocation());
}
function onEndDragPin(e){
console.log('dragend');
}
function init(){
// Load the map
var map = new Microsoft.Maps.Map(
document.getElementById("myMap"),
{
credentials: "YOUR-BING-KEY",
mapTypeId: Microsoft.Maps.MapTypeId.road
}
);
// Create a draggable Pushpin
var pin = new Microsoft.Maps.Pushpin(
map.getCenter(),
{
draggable: true
}
);
// Listen to its drag-related events
Microsoft.Maps.Events.addHandler(pin, 'dragstart', onStartDragPin);
Microsoft.Maps.Events.addHandler(pin, 'drag', onDragPin);
Microsoft.Maps.Events.addHandler(pin, 'dragend', onEndDragPin);
// And add the pin to the map
map.entities.push(pin);
}
</script>
</body>
</html>JavaScript VEMap.EnableTouch：触摸支持Bing Maps AJAX mapcontrol（例如IPhone webapps）
<script type="text/javascript">
/**
* Adds pan and zoom support for touch-based devices.
* Works best with fixed-size viewports, however VEMap.ZoomIn & VEMap.ZoomOut
* are very unreliable on the IPhone, you should keep the mini dashboard as a fallback.
*/
VEMap.prototype.EnableTouch = function(){
if (typeof Touch == "object"){
var map = this;
// Whether a gesture is being performed currently or not.
var gesture = false;
// Translates touch event names into similar mouse event names
var touch2mouse = {"touchstart": "mousedown", "touchmove": "mousemove", "touchend": "mouseup"};
// One finger interaction
var ontouch = function(e){
var touches = e.changedTouches;
if ((!gesture) && (touches.length == 1)){
if (e.type == "touchmove") e.preventDefault();
var obj = touches[0];
var e2 = document.createEvent("MouseEvent");
e2.initMouseEvent(touch2mouse[e.type], true, true, window, 1, obj.screenX, obj.screenY, obj.clientX, obj.clientY, false, false, false, false, 0, null);
obj.target.dispatchEvent(e2);
}
}
// Two fingers interaction
var ongesture = function(e){
e.preventDefault();
switch(e.type){
case "gesturestart":
gesture = true;
break;
case "gestureend":
gesture = false;
if (e.scale > 1){
map.ZoomIn();
} else if (e.scale < 1){
map.ZoomOut();
}
break;
}
}
// Zooms the map using touch-pinch
document.addEventListener("gesturestart", ongesture, true);
document.addEventListener("gesturechange", ongesture, true);
document.addEventListener("gestureend", ongesture, true);
// Pans the map using touch-drag
document.addEventListener("touchstart", ontouch, true);
document.addEventListener("touchmove", ontouch, true);
document.addEventListener("touchend", ontouch, true);
}
};
</script>
/***********************
* Example
**********************/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script type="text/javascript" src="snipplet_touch.js"></script>
</head>
<body onload="init();">
<div id="container" style="width: 256px; height: 200px; position: relative;"></div>
<script type="text/javascript">
<!--
function init(){
var map = new VEMap('container');
map.SetDashboardSize(VEDashboardSize.Tiny);
map.EnableTouch();
map.LoadMap();
}
//-->
</script>
</body>
</html>以上是关于HTML Bing Maps AJAX控件7.0：可拖动的Pushpins的主要内容，如果未能解决你的问题，请参考以下文章
javascript:Bing Maps AJAX Control, Version 7.0
JavaScript VEMap.EnableTouch：触摸支持Bing Maps AJAX mapcontrol（例如IPhone webapps）
Bing：directionsManger.getAllWaypoints() 不返回纬度/经度