我正在为新的律师事务所创建一个新网站。
我使用Google API嵌入地图。我添加了他们的地址,但是想将公司的名称添加到地图中......你可以在地图中看到它没有捕获名称:
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=myapikey&q=883%20Farmington%20Avenue%2C%20Berlin%2C%20CT%2006037%2C%20United%20States"></iframe>
所以,我尝试在iframe中的地址前添加一个名称:
q=Jill+Levin+Law,address here...
但我猜测关键字Levin
会选择匹配公司Soulsby & Levin, LLC
...即使我没有更改地址
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=myapikey&q=Jill+Levin+Law,883%20Farmington%20Avenue%2C%20Berlin%2C%20CT%2006037%2C%20United%20States"></iframe>
即使Google API本身也会根据关键字选择错误的
我如何:
答案 0 :(得分:11)
将标记添加到地图时,您可以将标题添加到标记中。
使用此代码执行此操作:
map.addMarker(new MarkerOptions().title("Office Name"));
答案 1 :(得分:2)
哟可以设置标记的纬度和经度,并在其上加上标题。
Private Sub ZipFiles()
Dim zipPath As String = "C:\TEMP\Compression\myzip.zip"
'Open the zip file if it exists, else create a new one
Dim zip As Package = ZipPackage.Open(zipPath, _
IO.FileMode.OpenOrCreate, IO.FileAccess.ReadWrite)
'Add as many files as you like:
AddToArchive(zip, "C:\TEMP\Compression\Compress Me1.txt")
AddToArchive(zip, "C:\TEMP\Compression\Compress Me2.txt")
AddToArchive(zip, "C:\TEMP\Compression\Compress Me3.txt")
zip.Close() 'Close the zip file
End Sub
Private Sub AddToArchive(ByVal zip As Package, _
ByVal fileToAdd As String)
'Replace spaces with an underscore (_)
Dim uriFileName As String = fileToAdd.Replace(" ", "_")
'A Uri always starts with a forward slash "/"
Dim zipUri As String = String.Concat("/", _
IO.Path.GetFileName(uriFileName))
Dim partUri As New Uri(zipUri, UriKind.Relative)
Dim contentType As String = _
Net.Mime.MediaTypeNames.Application.Zip
'The PackagePart contains the information:
' Where to extract the file when it's extracted (partUri)
' The type of content stream (MIME type): (contentType)
' The type of compression: (CompressionOption.Normal)
Dim pkgPart As PackagePart = zip.CreatePart(partUri, _
contentType, CompressionOption.Normal)
'Read all of the bytes from the file to add to the zip file
Dim bites As Byte() = File.ReadAllBytes(fileToAdd)
'Compress and write the bytes to the zip file
pkgPart.GetStream().Write(bites, 0, bites.Length)
End Sub
答案 2 :(得分:1)
我有这个
的生动样本
var map;
var root;
var geocoder;
var root_content= 'Type: [type]<BR>IP: 192.168.10.25<BR>Address: [address]';
function initialize() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': 'Ha noi, Vietnam'}, function(results, status) {
root = results[0].geometry.location;
var myStyles =[
{
featureType: "administrative",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},{
featureType: "water",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: root,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false, styles: myStyles,
disableDefaultUI: true, scrollwheel: false,
zoomControl: false, disableDoubleClickZoom: true
});
var center = {latLng: root, style: 'ae', content: 'md'};
try{
Draw();
}catch(e){alert(e)}
var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);
zoomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
});
}
function ZoomControl(controlDiv, map) {
// Creating divs & styles for custom zoom control
controlDiv.style.padding = '5px';
// Set CSS for the control wrapper
var controlWrapper = document.createElement('div');
// controlWrapper.style.background = 'white';
controlWrapper.style.borderStyle = 'solid';
controlWrapper.style.borderColor = 'gray';
controlWrapper.style.borderWidth = '1px';
controlWrapper.style.cursor = 'pointer';
controlWrapper.style.textAlign = 'center';
controlWrapper.style.width = '32px';
controlWrapper.style.height = '100px';
controlDiv.appendChild(controlWrapper);
// Set CSS for the zoomIn
var zoomInButton = document.createElement('div');
zoomInButton.innerHTML = '<br><img src="https://i.stack.imgur.com/2k0UD.png" title="Zoom In">';
controlWrapper.appendChild(zoomInButton);
// Set CSS for the zoomOut
var zoomOutButton = document.createElement('div');
zoomOutButton.innerHTML = '<img src="https://i.stack.imgur.com/zPVFs.png" title="Zoom Out">';
controlWrapper.appendChild(zoomOutButton);
var removeLineButton = document.createElement('div');
removeLineButton.innerHTML = '<img src="https://i.stack.imgur.com/tAc0f.png" title="Hide Line">';
controlWrapper.appendChild(removeLineButton);
// Setup the click event listener - zoomIn
google.maps.event.addDomListener(zoomInButton, 'click', function() {
Clean();
map.setZoom(map.getZoom() + 1);
Draw();
});
google.maps.event.addDomListener(zoomOutButton, 'click', function() {
Clean();
map.setZoom(map.getZoom() - 1);
Draw();
});
google.maps.event.addDomListener(removeLineButton, 'click', function() {
for(var i=0; i<po.length; i++) {
po[i].setMap(x?map:null);
}
x=x?false:true;
removeLineButton.innerHTML=x?
'<img src="https://i.stack.imgur.com/LeM4f.png" title="Show line">'
:'<img src="https://i.stack.imgur.com/tAc0f.png" title="Hide line">';
});
}
var x = false;
var po = [];
var nd = [];
function Draw1() {
for(var i=0; i<po.length; i++) {
po[i].setMap(null);
}
for(var i=0; i<nd.length; i++) {
nd[i].remove();
}
nd=[];
po=[];
}
function GetData() {
}
function Draw1() {
/*
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
contact=JSON.parse
alert(contact.firstname);
*/
for(var i=0; i<node.length; i++) {
//nd.push(create_node(map, node[i]));
}
for(var i=0; i<line.length; i++) {
//po.push(connect_node(map, line.node1, line.node2));
}
}
function Clean() {
for(var i=0; i<po.length; i++) {
po[i].setMap(null);
}
for(var i=0; i<nd.length; i++) {
nd[i].setMap(null);
}
po = [];
nd = [];
}
function Draw() {
var cen= root;
var a = true;
var b = true;
var dis = 0.1;
var k = 0;
for(var i=0; i<10; i++) {
k++;
if(a) {
cen = new google.maps.LatLng(cen.lat()+dis, cen.lng());
a=false;
}
else {
cen = new google.maps.LatLng(cen.lat(), cen.lng()+dis);
a=true;
}
var style = 'in';
if(k%5==1) style='ae';
else if(k%5==2) style='adn';
else if(k%5==3) style='mn';
else if(k%5==4) style='asn';
var cur = {latLng: cen, style: style, content: style.toUpperCase()};
nd.push(create_node(map, cur));
for(var j=i+1; j<10; j++) {
k++;
if(a) {
cen = new google.maps.LatLng(cen.lat()+((j%2)==0?1:(-1))*dis, cen.lng());
a=false;
}
else {
cen = new google.maps.LatLng(cen.lat(), cen.lng()+((j%2)==0?1:(-1))*dis);
a=true;
}
var style = 'in';
if(k%5==1) style='ae';
else if(k%5==2) style='asn';
else if(k%5==3) style='mn';
else if(k%5==4) style='adn';
var sub = {latLng: cen, style: style, content: style.toUpperCase()};
po.push(connect_node(map, cur, sub));
nd.push(create_node(map, sub));
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
var style = '';
var content = '';
if (typeof(self.args.marker_style) !== 'undefined') {
style = self.args.marker_style;
div.className = 'iot-node-'+style;
}
if (typeof(self.args.marker_content) !== 'undefined') {
content = self.args.marker_content;
var a = document.createElement('a');
a.innerHTML = content;
div.appendChild(a);
if(style=='info') {
var span = document.createElement('span');
span.innerHTML = 'x';
google.maps.event.addDomListener(span, "click", function(event) {
me.remove();
});
a.appendChild(span);
}
}
if (typeof(self.args.marker_style) !== 'undefined' && style!='') {
var cur = this.getPosition();
var me = this;
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
var point = this.getProjection().fromLatLngToDivPixel(this.getPosition());
if (point) {
if(style!='info') {
div.style.left = (point.x-10 ) + 'px';
div.style.top = (point.y-10) + 'px';
google.maps.event.addDomListener(div, "click", function(event) {
geocoder.geocode({'latLng': cur}, function(results, status) {
var addr = 'null';
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
addr = results[1].formatted_address;
}
}
var sub = {latLng: cur, style: 'info', content: root_content.replace('[type]', style.toUpperCase()).replace('[address]', addr)};
nd.push(create_node(map, sub));
});
});
} else {
div.style.left = (point.x-40 ) + 'px';
div.style.top = (point.y-15 -div.offsetHeight ) + 'px';
}
}
}
}
};
CustomMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
this.setMap(null);
};
CustomMarker.prototype.getPosition = function() {
return this.latlng;
};
function create_node(map, node) {
return new CustomMarker(
node.latLng,
map,
{
marker_style: node.style,
marker_content: node.content
}
);
}
var color= {};
color['ae'] = '#ff3300';
color['mn'] = '#669900';
color['in'] = '#ff9900';
color['asn']= '#cc9900';
color['adn']= '#330099';
function rand(min,max,interval)
{
if (typeof(interval)==='undefined') interval = 1;
var r = Math.floor(Math.random()*(max-min+interval)/interval);
return r*interval+min;
}
function connect_node(map, node1, node2) {
return new google.maps.Polyline({
path: [node1.latLng, node2.latLng],
geodesic: true,
strokeColor: color[node1.style],
strokeOpacity: 0.6,
strokeWeight: 2,
map: map
});
}
&#13;
.iot-node-ae, .iot-node-asn, .iot-node-adn, .iot-node-mn, .iot-node-in, .iot-node-info {
position: absolute;
list-style-type: none;
left: 20px;
top: 20px;
}
.iot-node-ae>a, .iot-node-asn>a, .iot-node-adn>a, .iot-node-mn>a, .iot-node-in>a, .iot-node-info>a {
position: relative;
z-index: 2;
display: block;
width: 20px;
height: 20px;
border-style: solid;
border-width: 2px;
border-color: white;
border-radius: 50%;
background: #0079ff;
text-align:center;
font-weight: bold;
padding-top:6px;
padding-left:3px;
padding-right:3px;
color:white;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.iot-node-info>a {
width: 120px;
height: 80px;
position: relative;
border-radius: 0;
text-align:left;
}
.iot-node-info>a>span {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a>span::hover {
position: absolute; top: 2px; right:2px;
cursor: pointer;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.iot-node-info>a::before {
content:"";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 26px solid #0079ff;
border-bottom: 13px solid transparent;
}
.iot-node-ae::after, .iot-node-asn::after , .iot-node-adn::after , .iot-node-mn::after , .iot-node-in::after , .iot-node-info::after{
content: '';
position: absolute;
border-radius: 50%;
width: 100%;
height: 100%;
top: 0;
left: 0;
//animation: cd-pulse 2s infinite;
}
@keyframes cd-pulse
{
0% {box-shadow:0 0 0 0 #0079ff}
100%{box-shadow:0 0 0 20px rgba(255,150,44,0)}
}
/* AE */
.iot-node-ae{
}
.iot-node-ae>a{
background: #ff3300;
font-size:14px;
}
.iot-node-ae::after{
//animation: cd-pulse 2s infinite;
}
/* asn */
.iot-node-asn{
}
.iot-node-asn>a{
background: #cc9900;
}
.iot-node-asn::after{
//animation: cd-pulse 2s infinite;
}
/* adn */
.iot-node-adn{
}
.iot-node-adn>a{
background: #330099;
}
.iot-node-adn::after{
//animation: cd-pulse 2s infinite;
}
/* mn */
.iot-node-mn{
}
.iot-node-mn>a{
background: #669900;
}
.iot-node-mn::after{
//animation: cd-pulse 2s infinite;
}
/* IN */
.iot-node-in{
}
.iot-node-in>a{
background: #ff9900;
font-size:14px;
}
.iot-node-in::after{
//animation: cd-pulse 2s infinite;
}
&#13;
<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps API</title>
<style type="text/css">
#map {
width: 1500px;
height: 1000px;
}
</style>
<link rel="stylesheet" type="text/css" href="iot_resource.css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script type="text/javascript" src="iot_resource.js"></script>
<script type="text/javascript" src="init_map.js"></script>
</head>
<body>
<div id="map">
</div>
<button onclick="Draw1()" />
</body>
</html>
&#13;